React Router V4
Tags: react, reactrouter
Published: 2019-05-03 21:38:48

---
title: React Router V4
published: true
description: This post shows how react router works in action.
tags: react, react-router
cover_image: https://thepracticaldev.s3.amazonaws.com/i/9le22x9zx6rzkm9x8rf7.png
---

React Router is a collection of navigational components that compose declaratively with your application.

###Prerequisite
React router requires react router package to be installed first in order to use it.
<blockquote>npm install --save react-router-dom </blockquote>

###Insert into component
```javascript
import {
    BrowserRouter,
    Route,
  } from 'react-router-dom'

```
<b>BrowserRouter</b>: to wrap entire nav into this wrapper
<b>Route</b>: to create individual routes which points to dedicated components. It takes two params <b>path</b> and <b>component</b>

##In Action
```javascript

import {
    BrowserRouter,
    Route,
  } from 'react-router-dom'

import Nav from './nav'

class App extends React.Component{
    render(){
        return(
            <BrowserRouter>
                <div className ="container">
                    <Nav />
                    <Route exact path="/" component = {home} />
                    <Route path="/about" component = {about} />
                    <Route path="/contact" component = {contact} />
                </div>
            </BrowserRouter>
           
        )
    }
}
```
### Creating links
Once we have our router ready which points to the individual component we can create anchor links which points to this route.

let's call this as nav.js. In this file we believe to add all our routes links.

```javascript

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

function nav(){
    return(
        <ul className='nav'>
        <li><NavLink exact activeClassName ='active' to ='/'>Home</NavLink> </li>
        <li><NavLink activeClassName ='active' to='/about'>About</NavLink></li>
        <li><NavLink activeClassName ='active' to='/contact'>Contact</NavLink></li>
        </ul>
    )

}
module.exports = nav

```

We first imported Link and NavLink component form react-router-dom. Navlink has special tags which helps to create more meaningful links.

we can pass <b>to</b> attribute to <b>NavLink</b> which is mainly the path to the route. We can also pass <b>activeClassName</b> attribute and pass some styling to it.

we also added <b>exact</b> attribute to our root path. it's needed as we have '/' in front of all our other routes. So to avoid confusion we tell react to go to exect that path only.

i.e
<blockquote>.active {
    font-weight:  bold;
  }</blockquote>

We have created three paths here
<ul>
<li>/</li>
<li>/about</li>
<li>/contact</li>
</ul>

If we create dedicated components, it will directed to their dedicated path. Here, we have to add <b>exact</b> to our <b>root</b> route as well or else all other links will be loading that component. 


## 404 Route

We can add 404 not found route with the use of <b>Switch</b> component of 'react-route-dom'

```javascript

import {
    BrowserRouter,
    Route,
    Switch
  } from 'react-router-dom'

import Nav from './nav'

class App extends React.Component{
    render(){
        return(
            <BrowserRouter>
                <div className ="container">
                    <Nav />
                    <Switch>
                        <Route exact path="/" component = {home} />
                        <Route path="/about" component = {about} />
                        <Route path="/contact" component = {contact} />
                        <Route render= {()=> <p>Not found</p> />
                    </Switch>
                </div>
            </BrowserRouter>
           
        )
    }
}
```
So whenever it does not found the Route it will render not found. Instead of creating entire new class we just render the text directly from our route.

##Codesandbox

{% codesandbox 03xyv16jw0 %}