Router and navbar in React tut 16

Router in React

To use router concept in React , first you have to  perform following steps.

1st : TO install Router 

$ npm install  --save react-router-dom

2nd :  import following in index.js file

import {BrowserRouter} from "react-router-dom"

3nd :  Use of BrowserRouter in index.js file

ReactDOM.render(

  <BrowserRouter><App/></BrowserRouter>

  ,

  document.getElementById('root')

);

4th : Router.jsx , where we give path of pages

import React from 'react'

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

import Contact from './RContact'

import About from './RAbout'

import ErrorMsg from './ErrorMsg'

import Navbar from './Navbar'

let Service = ()=>{

  return(<>

   <h1>This is Service page</h1>

  </>)

}

let Router = ()=>{

    return(<>

    {/* <Switch> */}

        {/* <Route path="/" component={About}/>  */}

        {/* show about page */}

        {/* <Route path="/contact" component={Contact}/>  */}

         {/* show about page because 

        router see / at start of /contact it assume it as first path  */}

    {/* </Switch> */}

    {/* <Switch> */}

      {/* <Route exact path="/" component={About}/> */}

       {/* show about page */}

      {/* <Route path="/contact" component={Contact}/> */}

       {/* show contact page because we include exact in path="/" 

       so  this will show about page only and in path="/contact"

        contact will show */}

        {/* <Route component={ErrorMsg} />/ */}

    {/* </Switch> */}

    <Navbar/>

    <Switch>

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

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

      {/* We have use exact here also because in next path 

      it will show contact page if we not use exact */}

      <Route path="/contact/service" component={Service}/>

      <Route component={ErrorMsg}/>

    </Switch>

    </>)

}

export default Router;

5th : pages (components) files

RAbout.jsx:

import React from 'react'

let About = ()=>{

    return(

    <>

      <h1> This is About Page</h1>

    </>

    )}

export default  About;

RContact.jsx:

import React from 'react'

let Contact = ()=>{

    return(

        <>

          <h1> This is contact Page</h1>

        </>

    

        )}

export default  Contact;

ErrorMsg.jsx:

import React from 'react';

let ErrorMsg = ()=>{

    return(

        <>

         <h1>Oops ! Page Not Found</h1>

        </>

    )

}

export default ErrorMsg;

Navbar Code

file : Navbar.jsx

import React from 'react';

import { Link, NavLink } from 'react-router-dom';

let Navbar = () => {

    return (

        <>

            <a href="/">About US  </a>

            <a href="/contact"> Contact US</a>

            <a href="/contact/service">   Serives</a>

            {/* Above links will refresh page  */}

            <br /> <br />

            {/* It will not refresh the page  */}

            <Link to="/"> About US </Link>

            <Link to="/contact">  Contact As </Link>

            <Link to="/contact/service"> Services </Link>

            {/* But it is not showing which link it currtly active */}

            <br/><br/>

            <NavLink exact activeClassName="active_class" to="/"> About US </NavLink>

            <NavLink exact activeClassName="active_class" to="/contact">  Contact As </NavLink>

            <NavLink exact activeClassName="active_class" to="/contact/service"> Services </NavLink>

        </>

    )

}

export default Navbar;

/* css used in Navbar.jsx */

// a.active_class{

//     color:black;

//     font-weight: bold;

//     border-bottom: 1px solid red;

//   }

  /* end */