React Router V4

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.

npm install --save react-router-dom

Insert into component

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

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

In Action

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.

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 to attribute to NavLink which is mainly the path to the route. We can also pass activeClassName attribute and pass some styling to it.

we also added exact 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

.active { font-weight: bold; }

We have created three paths here

• /
• /about
• /contact

If we create dedicated components, it will directed to their dedicated path. Here, we have to add exact to our root 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 Switch component of 'react-route-dom'

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