React Router for Beginner

React Router initial view

Create new project in react create-react-app project-name.

Step 1: Install React Router Dom: npm i react-router-dom
Step 2: First step to navigate to route. To do that import the link. import {Link} from 'react-router-dom'; into Navbar.js file

Navbar.js file

Wrap up the router link into <Link> </Link>

<div className="navbar">
            <div className="navbar__active">
               {active}
            </div>
            <div className="navbar__items">
            <Link to="/">
                {active !== 'About' && <div className="navbar__item" onClick={() => setActive('About')}>About</div>}
            </Link>

            <Link to="/resume">
                {active !== 'Resume'&& <div className="navbar__item" onClick={() => setActive('Resume')}>Resume</div>}
            </Link>

            <Link to="/projects">
                {active !== 'Projects' && <div className="navbar__item" onClick={() => setActive('Projects')}>Projects</div>}
            </Link>
            </div>
        </div>

How can we actually navigate to desire route. There is property called to where you can put your route. Just Like: to="/resume"

Error: Invariant Failed. You should not use outside the

We need to wrap the app inside the <Router>

Import import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom'; into App.js file

App.js file

function App() {
  return (
    <Router>
      <div className="App">
        <div className="container">
          <div className="row">
            <div className="col-lg-3">
              <div className="app__sidebar">
                <Sidebar />
              </div>
            </div>
            <div className="col-lg-9 app__main-content">
              <Navbar />
                <Route exact path="/">
                  <About />
                </Route>
                <Route path="/resume">
                  <Resume />
                </Route>
                <Route path="/projects" component={Projects} />
                <Route>
                  <Redirect to="/" />
                </Route>
            </div>
          </div>
        </div>
      </div>
    </Router>
  );
}

Create basic three components About.js, Resume.js and Projects.js

You can only using self closing tag. Like: <Route path="/projects" component={Projects} />

In this path="projects" and render component={Projects} Project component. There are certain limitation which are it has to be a single component in this route.

Routes check for partial matching that's why using exact

<Route exact path="/">
   <About />
</Route>

There is still bug in router

http://localhost:3000/resume Hit the browser URL then showing Resume content but Active element is About. This is not expected. Also click in Project menu and refresh the browser then showing same issue.

Let's see why this is happening.

Navbar.js

We have this initial value About

const [active, setActive] = useState('About')

Whenever this component render this first time. It will show this About

So when refresh then don't showing About. That's why we remove this.
const [active, setActive] = useState('')

When I am clicking the active menu Resume or Project or About then It is re-rendering and dynamically render the component.

<div className="navbar">
            <div className="navbar__active">
               {active}
            </div>
            <div className="navbar__items">
            <Link to="/">
                {active !== 'About' && <div className="navbar__item" onClick={() => setActive('About')}>About</div>}
            </Link>

            <Link to="/resume">
                {active !== 'Resume'&& <div className="navbar__item" onClick={() => setActive('Resume')}>Resume</div>}
            </Link>

            <Link to="/projects">
                {active !== 'Projects' && <div className="navbar__item" onClick={() => setActive('Projects')}>Projects</div>}
            </Link>
            </div>
        </div>

Showing dynamically the active value into active .

<div className="navbar__active">
    {active}
</div>

There is still bug in router

Click on the project menu. And refresh the browser then redirect to About page. But should stay in http://localhost:3000/projects

Now we can check URL when app render first time. Best time to use useEffect Hook

Navbar.js
Import import React, {useState, useEffect} from 'react';

So what useEffect does

    useEffect(() => {

    }, [])

useEffect write here based on this [] dependency Array. [] dependency Array empty means that is one time loaded when the component is first time load.

Now whenever we want active change onClick function fire.

So whenever we active change this will use useEffect

    useEffect(() => {
        let currentURL = window.location.href
        console.log(currentURL)
        if(currentURL.endsWith('/')){
            setActive('About')
        }else if(currentURL.endsWith('/resume')){
            setActive('Resume')
        }else if(currentURL.endsWith('/projects')){
            setActive('Projects')
        }
    }, [active])

Also update bit more App.js file. Using Switch. What Switch does. Switch component will check for matching router from the top and if it get's the match then it will break.

<Switch>
    <Route exact path="/">
                  <About />
     </Route>
      <Route path="/resume">
                  <Resume />
       </Route>
       <Route path="/projects" component={Projects} />
        <Route>
                  <Redirect to="/" />
        </Route>
   </Switch>

It does some partial checking in routing.

So when we go to project routing and refreshing. What is does. It is checking all the routes. And this does not match. Finally it is redirect to About page. Because of

<Route>
    <Redirect to="/" />
</Route>

Exactly we need right now.

We did it.

Source Code