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);