Introduction to React Router
Tags: react
Published: 2017-12-19 21:47:40

---
title: Introduction to React Router
published: true
description: 
tags: react
---

Previously I went through the [basics of react](https://dev.to/aurelkurtula/introduction-to-react-532). By the end of that tutorial we had a simple todo app. Today I am going to explore the basics of react router. 

Just as we have done in the previous tutorial, you can start this project by running `create-react-app some-name` or [codesandbox](https://codesandbox.io/s).

I will assume you are using codesandbox mainly because it's simple for all of us to quickly get started. If you know how to work with the terminal then you don't need instructions on that, you can follow along just as easy.

Again, when navigating to [codesandbox](https://codesandbox.io/s) click "react" and you'll get a starter project. 

## Installing the router 

Routes come in a separate package, so we need to install `react-router-dom`. 

If you want to follow along at codesandbox then click on "Dependencies" on the right hand side, the packages that are already installed are revealed, then simply select "Add Packages" then just search for "react-router-dom". 

Remember for the terminal users, run:

    yarn add react-router-dom

## Let's get started 

In `index.js`, replace the existing code with the following. 

    import React from 'react';
    import { render } from 'react-dom';
    import { BrowserRouter, Route, Link } from 'react-router-dom';
    const App = () => (
      <BrowserRouter>
        <div>
          Hello world 
        </div>
      </BrowserRouter>
    );
    render(<App />, document.getElementById('root'));

Note how we take `BrowserRouter`, `Route`, and `Link` from the `react-router-dom` package. 

Based on the [documentation](https://reacttraining.com/react-router/web/api/BrowserRouter) the `BrowserRouter` is 

> A <Router> that uses the HTML5 history API (pushState, replaceState and the popstate event) to keep your UI in sync with the URL.

As you can see in our code, you can think of `BrowserRouter` as the parent wrapper of the app. However, note that we still need to use an html wrapper to wrap the code. 

## Creating the first route

Let's create the first route using the `Route` module. 

      <BrowserRouter>
        <div>
          <Route path='/' render={props => {
            return (
              <h1>Hello World</h1>
            )
          }} />
        </div>
      </BrowserRouter>

Now you'll see "Hello World" printed on the home page. 

It's very easy to make sence of the code, we have made sure that when the client navigates to the home page - in other words to the specified path (`path='/'`) then we render some code. 

The code that we are rendering looks like a component, and it is a component. As such, "There are 3 ways to render something with a `<Route>`" ([ref](https://reacttraining.com/react-router/web/api/Route/Route-render-methods))

- `<Route component>`
- `<Route render>`
- `<Route children>`

Let's use the component method. Of course, the component method takes a component, so let's create a basic component first. Create a new file called `Helloworld.js` and add the following:

    import React from 'react';
    const HelloWorld = () => (
      <h1>Hello world from a separate component</h1>
    );
    export default HelloWorld;

Now back in `index.js` let's import the component then use it 

      import Helloworld from './HelloWorld'
      <BrowserRouter>
        <div>
          <Route path='/' component={Helloworld} />
        </div>
      </BrowserRouter>

## Using multiple routes 

Clearly the usefulness of routes is to have more than one. To keep the code simple lets just paste the above `Route` a few times

      import Helloworld from './HelloWorld'
      <BrowserRouter>
        <div>
          <Route path='/' component={Helloworld} />
          <Route path='/hello' component={Helloworld} />
          <Route path='/hello/world' component={Helloworld} />
        </div>
      </BrowserRouter>


With that, the `Helloworld` component will be rendered on all three paths. 

**However there is an unexpected side effect,** if we navigate to `/hello/world` we see all three components rendered on the page. 

![img](https://thepracticaldev.s3.amazonaws.com/i/eks1x8c643cx711ra0zp.png)

There are times when that is the effect we want, however not this time! There are two ways we can fix this issue. We could use `Switch`, which `react-router-dom` gives us. Or we could use `exact` as an attribute to each `Route`.

Referring to the [documentation](https://reacttraining.com/react-router/web/api/Switch):

> `<Switch>` is unique in that it renders a route exclusively. In contrast, every `<Route>` that matches the location renders inclusively

So we use a `Switch` to wrap our routes:

      <BrowserRouter>
        <Switch>
          <Route path='/' component={Helloworld} />
          <Route path='/hello' component={Helloworld} />
          <Route path='/hello/world' component={Helloworld} />
        </Switch>
      </BrowserRouter>

Now each route will be rendered exclusively.

The other way is to just use `exact` as the attribute in the `Route`.

      <BrowserRouter>
        <div>
          <Route exact path='/' component={Helloworld} />
          <Route exact path='/hello' component={Helloworld} />
          <Route exact path='/hello/world' component={Helloworld} />
        </div>
      </BrowserRouter>

Finally, we are able to use `Link` to link through these routes. Use `Link` instead of the usual anchor tag. 

      <BrowserRouter>
        <div>
          <Link to="/">Home</Link>
          <Link to="/hello">Hello</Link>
          <Link to="/hello/world">world</Link>
        </div>
      </BrowserRouter>


Note that `Link` has to be used within the wrapping div. 

That's it for the basics of routing in react.