React Router for Beginner
Tags: react, router
Published: 2020-10-03 19:22:29

---
title: React Router for Beginner
published: true
description: 
tags: react, router 
//cover_image: https://direct_url_to_image.jpg
---

### React Router initial view

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h13nr4o9741dtgoscjv0.png)

**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 <Link> outside the <Router> 

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](https://github.com/bipon68/me-react-portfolio2)