how to use react-router-dom, but better !!

1st step
//create react app like this ==> npx create-react-app react-router-dom

2nd step
//instal react-router-dom ==> npm i react-router-dom or yarn add react-router-dom

and then open your text editor like 'sublime text 4',

//3rd step

create file named as 'src/Navbar.js',
and use this code.

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

const Navbar = () => {
    return (
        <div>
            <Link to="/">Home</Link>
            <Link to="/about">About</Link>
        </div>
    )
}

export default Navbar

create your pages like "Home ,ABout,Contact etc" I am just gonna go with "Home and About" ok :).

this is my home and about code
home :

import React from 'react'

const Home = () => {
    return (
        <div>
            <h1>This Is home page</h1>
        </div>
    )
}

export default Home

and this is for about :

import React from 'react'

const Home = () => {
    return (
        <div>
            <h1>This Is about page</h1>
        </div>
    )
}

export default Home

last step
//you have paste this code in app.js

import logo from './logo.svg';
import {BrowserRouter as Br,Route} from 'react-router-dom'
import Navbar from './Navbar'
import Home from './Home'
import About from './About'

function App() {
  return (
    <div className="App">

      <Br>
        <Navbar />
        <Route exact path="/">
        <Home />
      </Route>
      <Route exact path="/about">
        <About />
      </Route>
      </Br>
    </div>
  );
}

export default App;