loading...

How to use React Router

deboragaleano profile image Debora Galeano Updated on ・2 min read

In this post, I will show you how to include React Router in your react project.

It's easy to use and it's great for improving the navigation experience.👌🏽

Here's a demo of a simple navbar (and the button in the About page that redirects back to Home):

Alt Text

Now let's see how to get started with React Router.

Installation

  • Install react-router-dom
  • Note: Make sure that you're already working on a create-react-app before adding it to your project
npm install react-router-dom
Enter fullscreen mode Exit fullscreen mode

Include the Router

  • Wrap your <App /> component with <BrowserRouter />
  • Add each <Route /> with its path and respective component
  • Wrap <Switch /> around your routes. Switch will start looking for a matching route and the exact attribute will make sure that it matches exactly what we want

The <Navbar /> component will take care of the <NavLink />, more on this below.

import React from 'react';
import {BrowserRouter, Switch, Route} from 'react-router-dom';
import About from './About';
import Home from './Home'; 
import Navbar from './Navbar'; 

function App() {
  return (
      <BrowserRouter>
        <Navbar /> 

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

      </BrowserRouter>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Add NavLink

  • <NavLink /> will act as each Navbar link, which is using client-side routing (exclusive of single-page applications)
  • <NavLink /> comes with the activeClassName property, which will allow us to add CSS to active/non-active links
import React from 'react';
import {NavLink} from 'react-router-dom'
import './App.css'; 

export default function Navbar() {
    return (
        <div>
            <NavLink 
                activeClassName="selected"
                className="not-selected"
                to="/"
                exact
                >HOME</NavLink>
            <NavLink 
                to="/about"
                activeClassName="selected"
                className="not-selected"
                exact
                >ABOUT
            </NavLink>
        </div>
    )
}
Enter fullscreen mode Exit fullscreen mode

The useHistory hook

  • What does it do? It provides access to the history prop that you may use to navigate
  • In other words, useHistory can be used for redirecting which is very convenient!
import React from 'react'; 
import {useHistory} from 'react-router-dom'; 

export default function About() {
    const history = useHistory()

    const handleClick = () => {
        history.push('/')
    }

    return (
        <div>
            <h1>ABOUT</h1>
            <p>THIS IS THE ABOUT PAGE</p>
            <div>
                <button 
                    onClick={handleClick}>
                    Back to Home
                </button>
            </div>
        </div>
    )
}


Enter fullscreen mode Exit fullscreen mode

And that's it! 😬

Discussion

pic
Editor guide
Collapse
lijomloyid profile image
LIJO M LOYID

This is awesome. You have summarized all the basics of React Router in a concise manner. It would be great if you could also include URL Parameters nested routes also

Collapse
scribbletons profile image
ScribbleTons

An amazing piece. Coming from vue background and trying react, I'm keep this article for raining days you know.

Thanks Debi

Collapse
segdeha profile image
Andrew Hedges

Super clear, concise explanation of how to use React Router effectively! Nice work!

Collapse
yahaya_hk profile image
Kenny

Lovely writeup Deborah! 👏👏So proud of you ☺️☺️☺️