React Router: Tutorial for beginners!

5 min readNov 14, 2020

React router makes creating a react app so much simpler. It’s basically a tool that allows us to handle routes in your web application using dynamic routing. Dynamic routing takes place as the app is rendering on your machine.

Step 1: Installation

React Router has a total of three different packages: react-router, react-router-native, and react-router-dom.

The first one mentioned react-router should usually never be installed directly. This package provides all the core routing components and functions for React Router applications. On the other hand the other two mentioned above that provide environment specific (browser and React Native) components, they both also re-export all of react-router's exports.

In this tutorial we will be focusing on react-router-dom , the package needed for building websites in the browser.

npm install --save react-router-dom

Step 2: Choosing a Router

Before starting any new react project, you first need to decide which type of router to use. Using “react-router-dom” the router we use for creating websites, there are two router components. The <BrowserRouter> and <HashRouter>. The <BrowserRouter> is to be used whenever you have a server that will handle dynamic requests while the <HashRouter> should be used for static websites.

It’s common practice to use a <BrowserRouter>, but if your website is hosted on a server that only has static files, then you’re better off with<HashRouter>.Since we want this tutorial to focus on the more popular of the two, we will stick with <BrowserRouter>.

Step 3: Rendering the Router

It’s important to know the router components only expect to receive a single child element. Since that is the case, it is very useful and common practice to create an <App> component that renders the rest of your application.

import { BrowserRouter } from 'react-router-dom';  ReactDOM.render((   
    <BrowserRouter>     
      <App />   
        </BrowserRouter> 
), document.getElementById('root'));

Step 4: App

We defined our application within the <App> component. To simplify things even further, we’re going to split up our application into two parts. The <Header> component will contain all links we need to navigate throughout the website and the <Main> component is where we will render the rest our content.

function App() {   
   return (     
     <div>       
        <Header />       
        <Main />     
     </div>   
   ); 
}

The <Route> component is the main building block of React Router. Anywhere that you want to render content based on the location’s pathname, you need to use a <Route> element.

Step 5: Path

When using a<Route> its will expect a path prop, this is just a string that describes the pathname that the route matches — for example, <Route path='/the-office'/> should match a pathname that begins with /the-office. The current locations pathname needs to be matched by the path, if so the route will render a React element. If the path does not match, the route will not work and nothing will be rendered.

<Route path='/the-office'/><Route exact path='/the-office'/>

When matching routes react really only cares about the pathname so lets say the URL is:

http://www.example.com/the-office

the only part that React Router is concerned about is /the-office.

Step 6: Creating Routes

It’s possible to create<Route>s anywhere inside of the router, but it’s common practice to render all the routes in the same place. This could easily be done by using the <Switch> component to group <Route>s. The <Switch> will iterate over each of its children elements which are the routes and only render the first one that matches the current pathname.

An example of a simple website with paths are:

<Switch> 
  
  <Route exact path='/' component={Home}/>   
  <Route path='/the-office' component={theOffice}/>   
  <Route path='/character' component={Character}/>
 
</Switch>

Now we just need to render our routes. We will render our <Switch> and <Route>s inside of our <Main> component, this will place the HTML generated by a matched route inside of a <main> DOM node.

import { Switch, Route } from 'react-router-dom'
 function Main() {
   return (
     <main>
       <Switch> 
  
         <Route exact path='/' component={Home}/>   
         <Route path='/the-office' component={theOffice}/>   
         <Route path='/character' component={Character}/>
 
      </Switch>
    </main>
   ); 
 }

Step 7: Nested Routes

As you could see the profile route /character/:number is not included in the above <Switch>. Instead, we will render it by the <Character> component, which is rendered whenever the pathname begins with /character.

Within the <Character> component we will render routes for two paths:

/character — This will only be matched when the pathname is exactly /character.
/character/:number — This route on the other hand uses a path param, it captures the part of the pathname that comes after /character.

function Character() {   
   return (     
     <Switch>       
       <Route exact path='/character' component={AllActors}/>                        .      <Route path='/character/:number' component={Actor}/>     
    </Switch>   
   ); 
}

Step 8: Path Params

Path params are used when there are variables within a pathname that we need to capture. For example, with our character profile route, we want to capture the character’s number. We can do this by adding path params to our route’s path string.

The :number of the path /character/:number is the part of the pathname that comes after /character/ it will be captured and stored as match.params.number. For example, the pathname /character/6 will generate a params object:

{ number: '6' }

Step 9: Links

Lastly we need our application to navigate between pages. We can do this by creating links using the anchor element. React Router provides the<Link> component, when clicking a <Link>, the URL will be updated and the rendered content will change without reloading the page.

import { Link } from 'react-router-dom'  function Header() {   
   return (     
     <header>       
       <nav>         
         <ul>           
           <li><Link to='/'>Home</Link></li>           
           <li><Link to='/roster'>Roster</Link></li>           
           <li><Link to='/schedule'>Schedule</Link></li>                       .        </ul>       
       </nav>     
    </header>   
   ); 
 }

<Link> uses the prop to describe the location where they should navigate. This can be a string or a location object. When it is a string, it will be converted to a location object

<Link to={{ pathname: '/character/9' }}>Actor #9</Link>

Good luck with all your coding endeavors, I hope at this point of the article you have a basic knowledge of how to incorporate react router in your react app!!