React Router | React Router Dom

 React Router | React Router Dom 

Source Code:

Home.js

import React from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import About from './About';
import Index from './Index';
import Navbar from './Navbar';
export const Home = () => {
    return (
        <div>
            <BrowserRouter>
                <Navbar />
                <Routes>
                    <Route path="/"/>
                    <Route path="/home" element={<Index />} />
                    <Route path="/about" element={<About />} />
                </Routes>
            </BrowserRouter>
        </div>
    )
}
export default Home;

Navbar.js

import React from 'react'
import { NavLink } from 'react-router-dom';
export const Navbar = () => {
    return (
        <div>
            <ul><li>
                    <NavLink to="/">main</NavLink>
                </li>
                <li>
                    <NavLink to="/home">Home</NavLink>
                </li>
                <li >
                    <NavLink to="/about">About</NavLink>
                </li>
            </ul>
        </div>
    )
}
export default Navbar;

Index.js

import React from 'react'
export const Index = () => {
    return (
        <div>
            <h1>This is the home page</h1>
        </div>
    )
}
export default Index;

About.js

import React from 'react'
export const About = () => {
    return (
        <div>
            <h1>This is the about page</h1>
            
        </div>
    )
}
export default About;

Create React Navbar/menu