How to create react routing

For react routing you need to a project if you don’t have any project then you can create a new project from my first blog. 


What is react router?
When you have created a project in the react then it’s required routes because you have a lot of components and you want to jump another page. So react routing have a package for the routing and need to run it. “npm install react-router-dom”.

After running this the command needs to pages where you will navigate as below given code :
For the home page:
import React from 'react';
const Home = () => {
    return(
        <div>
            <h1>Home</h1>
            <p>Home content will come here when content will add new</p>
        </div>
    )
}
export default Home;

 For the page not found:
import React from 'react';
const Pagenotfound = () => {
    return(
        <div>
            <h1>Pagenotfound</h1>
            <p>Error page not found 404</p>
        </div>
    )
}
export default Pagenotfound;

For the sitemap page:
import React from 'react';
const Sitemap = () => {
    return(
        <div>
            <h1>Sitemap</h1>
            <p>Sitemap content will come here when content will add new</p>
        </div>
    )
}
export default Sitemap;

For the About page:
import React from 'react';
const About = () => {
    return(
        <div>
            <h1>About</h1>
            <p>About content will come here when content will add new</p>
        </div>
    )
}
export default About;

For the custom css need to add in the App.css:
.containerMain{ max-width: 1000px; margin: 0 auto;}
.mainNav ul { list-style: none; margin: 0; padding: 0;}
.mainNav li { display: inline-block; margin: 2px;}
.mainNav li a{ background: #eee; border-radius: 5px; padding: 5px; display: block; text-decoration: none;color: #000}
.mainNav li a:hover{ background: #ddd;}
 form div{ margin-bottom: 10px;}
form label{     width: 110px;
  display: inline-block;}
 .footerNav{background: #eee; padding: 10px; text-align: center; margin-top: 30px;}
.footerNav ul { list-style: none; margin: 0; padding: 0;}
.footerNav li { display: inline-block; margin: 2px;}
.footerNav li a{ padding: 5px; text-decoration: none;color: #333}
.footerNav li a:hover{ color: #61dafb}

 Also, you can create a lot of pages as you wish: Now you can see my folder structure. You can create a folder structure as you wish.


Now required to create approuter.js it would be in the root path as in the screenshot.

Approuter.js code:
import React from 'react';

import {Switch, Route, Redirect} from 'react-router-dom';

import Home from './containers/home/home';
import About from './containers/about/about';
import Student from './containers/students/students';
import Registration from './containers/registration/registration';
import Pagenotfound from './containers/pagenotfound/pagenotfound';
import Sitemap from './containers/sitemap/sitemap';

const Approuter = () => {
    return(
        <Switch>
            <Route path='/' exact component={Home} />
            <Route path='/home' component={Home} />
            <Route path='/student' component={Student} />
            <Route path='/registration' component={Registration} />
            <Route path='/sitemap' component={Sitemap} />
            <Route path='/pagenotfound' component={Pagenotfound} />
            <Route path='/about' component={About} />

            <Redirect from='/*' to='/pagenotfound' />
        </Switch>
    )
}

export default Approuter;

Now in latest react version 18+ react router dom change some element And component replaced with element as below example:

 <Router>

            <Link to='/home'>Home</Link>
            <Link to='/about'>About</Link>
            <Link to='/services'>Services</Link>
                <Routes>
                    <Route path="/" exact element={<Home/>}/>
                    <Route path="/about" element={<About/>} />
                    <Route path="/pagenotfound" element={<Pagenotfound/>} />
                    <Route path="/services" element={<Services/>} />
                    <Route path="/*" element={<Pagenotfound/>} />
                </Routes>
            </Router>

Need to import 

import {BrowserRouter as Router, Route, Routes, Link} from "react-router-dom"

No need to add "BrowserRouter" in the index.js file.




this is components structure as below screenshot:

header.js code:
import React,{Component} from 'react';
import NavmanLinks from './navlist';

export default class Header extends Component{

    state = {
        navlist: [
            {name:'Home', href:'/home'},
            {name:'About', href:'/about'},
            {name:'Student', href:'/student'},
            {name:'Registration', href:'/registration'}
        ]
    }

    rendernavlist = () =>{
        return this.state.navlist.map(item => <NavmanLinks linkName={item.name} linksHref={item.href} />);
    }

    render(){
        return(
            <div className="mainNav">
                <ul>
                    {this.rendernavlist()}
                </ul>
            </div>
        )
    }
}

Note:
................................................................................................

Also you can create header.js file with the stateless component as below code:

import React from 'react'
import Navlist from '../header/navlist'

export default () => {
    
    const routes = {
        navlist: [
            {name:'Home'href:'/home'},
            {name:'About Us'href:'/aboutus'},
            {name:'Page Not found'href:'/pagenotfound'}
        ]
    }

   const rendernavlist = () => {
        return routes.navlist.map(item => <Navlist linkName={item.name} linkHref={item.href} /> )
    }

    return (
        <>
            <ul>
                {rendernavlist()}
            </ul>
        </>
    )
}

]
................................................................................................

navlist.js code:
import React from 'react';
import {Link} from 'react-router-dom';
const NavmanLinks = (props) => {
    return(
        <li>
            <Link to={props.linksHref}>
                {props.linkName}
            </Link>
        </li>
    )
}
export default NavmanLinks;

App.js code:
import React from 'react';
import './App.css';

import Approuter from './approuter';
import Header from './components/header/header';
import Footer from './containers/footer/footer'

function App() {
  return (
    <div className="containerMain">
      <Header />
      <Approuter />
      <Footer />
    </div>
  )
}

export default App;

in the App.js need to import approuter.js

index.js code:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {BrowserRouter} from 'react-router-dom';

ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Browser router need to import then wrap to <App />

Finally, you will use npm start command and you will get look like screenshot.

Q. How to give a link between content one page to another page?

Ans.: You want to give a link from the main page to about us page as:
"Welcome to anythinglearn.com you can give a link to about page then you will need to link as<Link to="/about">about</Link>
OR

<Link className="btn btn-default" to={pathname: '/yourfileName/filename' }}> about</Link>

Also, You can use within any method as below code:
setTimeout(() => {
        this.props.history.push("/about");
     }, 10);

1 comment:

Note: Only a member of this blog may post a comment.

Copyright Reserved to Anything Learn. Powered by Blogger.