Routing Example

Create Nav.js component and write following code in it 

import React, { Component } from 'react';

import {Link} from 'react-router-dom'

 class Nav extends Component {

  render() {

    return <nav className='navbar navbar-dark bg-primary'>

        <div className='container'>

            <Link to="/" className='navbar-brand'>

                Home

            </Link>

            <ul className='nav'>

                <li className='nav-item'>

                <Link to='/home' className='nav-link text-white'>

                Axios

            </Link>

                </li>

                <li className='nav-item'>

                <Link to='/chatapp' className='nav-link text-white'>

                ChatApp

            </Link>

                </li>

                <li className='nav-item'>

                <Link to='/profile' className='nav-link text-white'>

                UserProfile

            </Link>

                </li>

                <li className='nav-item'>

                <Link to='/gender' className='nav-link text-white'>

                FilterApp

            </Link>

                </li>

            </ul>

        </div>

    </nav>;

  }

}

export default Nav;

Update App.js with following code.

import './App.css';

import State from './Components/Header/Header.js';

import Home from './Components/ChatApp/Home';

import ProfileState from './Components/State/ProfileState';

import Gender from './Components/Gender/Gender';

import AsyncAwait from './Components/Axios/AsyncAwait';

import Nav from './Components/Nav/Nav';

import { BrowserRouter, Route, Routes } from 'react-router-dom';

import PageNotFound from './Components/PageNotFound/PageNotFound';

function App() {

  return (

    <div className="App">

<BrowserRouter>

<Nav/>

<Routes>

<Route path="/" element={<State/>} />

  <Route path="/home" element={<AsyncAwait/>} />

  <Route path="/chatapp" element={<Home/>} />

  <Route path="/profile" element={<ProfileState/>} />

  <Route path="/gender" element={<Gender/>} />

<Route path="*" element={<PageNotFound />} />

</Routes>

</BrowserRouter>

    </div>

  );

}

export default App;

After this do npm start , our application will look like this

PostedBy: pankaj_bhakre