Recat Router

 We have to first install https://www.npmjs.com/package/react-router-dom This package then after 

import import { BrowserRouter, Route, Link } from "react-router-dom";

and also  Switch

Note:- <a href = "#"> click</a> This is the wrong way it will load the full page we have to use the 

Router Link for that 

Index.js

import { BrowserRouter, Route, Link } from "react-router-dom"; 

ReactDOM.render(<div>

  <App />

  <BrowserRouter> //we have to take all changing element in This Browser tag

  <Rot/>

  </BrowserRouter>

</div>,document.getElementById("root"));

////////////////////////////////////////////

Router.Jsx

import React from "react";

import { BrowserRouter, Route, Link,Switch } from "react-router-dom"; 

import About from "./About";

import Contact from "./Contact";

import Error from "./Error";

 function name() {

    return (

        <div>

           <h1>This is a name</h1> 

        </div>

    )

}

function Rot(){

    return (<>

    <button><Link to="/Contact">Click</Link></button>

            <br />

            <Link to="/">Click</Link>

    <Switch>

        <Route exact path='/' component ={About} />

        <Route exact path='/contact' component ={Contact} />

        <Route path='/contact/name' component ={name} />

        <Route component ={Error} />

        </Switch>

   

        {/* <About />

        <Contact /> */}

    </>)

};

export default Rot;

////////////

Error.jsx

import React from 'react'

export default function Error() {

    return (

        <div>

            <h1 className="click"><a href="/Contact">Click</a></h1>

        </div>

    )

}

////////////

import React from 'react'

export default function Contact() {

    return (

        <div>

            <h1>This is contact page</h1>

        </div>

    )

}