React Router Introduction
Tags: react, javascript, beginners
Published: 2019-03-07 12:32:42

---
title: React Router Introduction
published: true
description: Learn how to implement React Router in this tutorial.
tags: React, JavaScript, Beginners
cover_image: https://thepracticaldev.s3.amazonaws.com/i/8j67cfg79qqo5sjwai3r.png
canonical_url: https://sebhastian.com/react-router-introduction/
---

[React Router](https://reacttraining.com/react-router/web/guides/quick-start) is a third party library created to solve the problem of routing in React app. It wraps around the browser history API and does the job of keeping your React application UI in sync with the browser's URL.

There are two packages of React Router: `react-router-dom` for React and `react-router-native` for React Native. Since you're learning about making web application, you only have to install `react-router-dom`:

```
npm install react-router-dom
```

There are 3 basic React Router components commonly used in minimal navigation, they are `BrowserRouter`, `Route` and `Link`. Let's explore about `BrowserRouter` and `Route` first:

```jsx
import { BrowserRouter as Router, Route } from 'react-router-dom'

class RouterNavigationSample extends React.Component {
  render() {
    return (
      <Router>
      <>
        <NavigationComponent />
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </>
      </Router>
    )
  }
}
```

The `BrowserRouter`, which is imported as `Router`, acts as the parent component that wraps all of your React component. It will intercept Browser request URL and match its path with the corresponding `Route` component. So if the browser URL is `localhost:3000/about`, the `Router` will take that information and than look for a `Route` component that has the `path` attribute of `/about`.

You will determine what will be rendered by adding the `component` attribute to `Route`.

In the sample above, an `exact` attribute is added to the default `Route` path (`/`), because without it, any route with `/` will also render the `Home` component, causing inconsistencies in the navigation.

The third component `Link` is used for navigation, replacing the regular `<a>` tag of HTML. This is because a regular HTML anchor tag will do a full refresh of the browser on click, which is not suited for React application. A React app only needs to update the URL, browser history and component rendered without any browser refresh:

```jsx
import { Link } from "react-router-dom";

class NavigationComponent extends React.Component {
  render() {
    return (
      <>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About page</Link>
          </li>
        </ul>
        <hr />
      </>
    );
  }
}
```

You can try a working demo [here](https://codesandbox.io/s/j709lm2zj9).

Note how you can use the previous and next button of the browser's navigation bar, and the url is updated with subsequent navigation, without the browser loading. This is the power of React Router in action.

## Making dynamic routing

You've seen how to create simple navigation using React Router, yet most web application require more advanced function than that. You probably need a dynamic routing, where you can put something like `/user/:id`, in which React needs to render something based on the value of `:id`.

Old links can also be dead and need to be redirected to new link.

Also, if the browser URL doesn't match any existing route, you need to display a 404 page.

That's why you need to learn about 2 more components, `Switch` and `Redirect`. [`Switch`](https://reacttraining.com/react-router/web/api/Switch) is a unique component that will render the first matching `Route`, then stop. To illustrate this example:

```jsx
import { Route } from 'react-router'

<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>
```

In the above code, a browser URL of `/about` will match all three routes, causing it all to be rendered and stacked below each other. Now by using the `Switch` component, React Router will render the `About` component route and then stop.

```jsx
import {Switch, Route} from 'react-router';

<Switch>
  <Route path='/about' component={About} />
  <Route path='/:user' component={User} />
  <Route component={NoMatch} />
</Switch>;
```

The order of the `Route` component inside `Switch` is important, so make sure you declare all static route first before declaring routes with url parameter and 404 route.

Now for `Redirect`, the component is pretty simple. You only need to add `from` attribute that states the old URL and `to` attribute specifying the new URL to link to.

```jsx
import {Redirect} from 'react-router';

<Redirect from='/old-match' to='/will-match' />;
```

## Nested route

In order to create nested route, you need to declare another `Route` inside the parent component. For example, let's say you have `/users` route that render to Users component.

Let's do a little exercise. First, create an array of objects that store user data, the following will do:

```jsx
const users = [
  {
    id: '1',
    name: 'Nathan',
    role: 'Web Developer',
  },
  {
    id: '2',
    name: 'Johnson',
    role: 'React Developer',
  },
  {
    id: '3',
    name: 'Alex',
    role: 'Ruby Developer',
  },
];
```

Now create a simple routing in the application:

```jsx
class RouterNavigationSample extends React.Component {
  render() {
    return (
      <Router>
        <>
          <NavigationComponent />
          <Route exact path='/' component={Home} />
          <Route path='/about' component={About} />
          <Route path='/users' component={Users} />
        </>
      </Router>
    );
  }
}
```

The NavigationComponent is where you write the `Link` component for navigating the application:

```jsx
class NavigationComponent extends React.Component {
  render() {
    return (
      <>
        <ul>
          <li>
            <Link to='/'>Home</Link>
          </li>
          <li>
            <Link to='/about'>About page</Link>
          </li>
          <li>
            <Link to='/users'>Users page</Link>
          </li>
        </ul>
        <hr />
      </>
    );
  }
}
```

It's time to create components to render on specific routes. `Home` and `About` component will render a single div, while `Users` will have another `Link` and `Route` component.

Inside the Users component, you will render a list of users, with a _nested route_ to individual user by its ID, like `/users/:id`:

```jsx
const Home = () => {
  return <div>This is the home page</div>;
};

const About = () => {
  return <div>This is the about page</div>;
};

const Users = () => {
  return (
    <>
      <ul>
        {users.map(({name, id}) => (
          <li key={id}>
            <Link to={`/users/${id}`}>{name}</Link>
          </li>
        ))}
      </ul>
      <Route path='/users/:id' component={User} />
      <hr />
    </>
  );
};
```

There's nothing new with this code. So you can write the `User` component now:

```jsx
const User = ({match}) => {
  const user = users.find((user) => user.id === match.params.id);

  return (
    <div>
      Hello! I'm {user.name} and I'm a {user.role}
    </div>
  );
};
```

Now here is something new I haven't told you about. Every time a component is rendered in a specific route, the component receive route props from React Router. There are 3 route props being passed down into component: `match`, `location`, `history`.

You can look at the props by opening the React Developer Tools and highlight the matching component route:

![Route props](https://sebhastian.com/static/547d76632d58c08d209766224e17dd4a/228d5/route-props.png)

(If you're opening from Codesandbox, you can open the demo in a new separate window to enable React DevTool)

Notice how you add `/:id` URL parameter in the `Users` component nested route. This id is passed down to the `User` component through the `match.params.id` object property. If you passed the URL parameter as `/:userId`, it will be passed down as `match.params.userId`.

Now that you know about route props, let's refactor `Users` component a bit:

```jsx
const Users = ({ match }) => {
  return (
    <>
      <ul>
        {users.map(({ name, id }) => (
          <li key={id}>
            <Link to={`${match.url}/${id}`}>{name}</Link>
          </li>
        ))}
      </ul>
      <Route path={`${match.url}/:id`} component={User} />
      <hr />
    </>
  );
}
```

As always, [here](https://codesandbox.io/s/nrm107nvxp) is a working demo.

## Passing props to Route component

You might think that passing props into Route component is the same as passing into regular component:

```jsx
<Route path="/about" component={About} user='Jelly'/>
```

Unfortunately, React Router doesn't forward the props entered into `Route` component into the `component` props, so you have to use another method.

Fortunately, React Router provides a [render](https://reacttraining.com/react-router/web/api/Route/render-func) attribute that accepts a function to be called when the URL locations matches. This props also receives the same `route props` as the `component` props:


```jsx
<Route
  path="/about"
  render={props => <About {...props} admin="Bean" />}
/>

// the component
const About = props => {
  return <div>This is the about page {props.admin}</div>;
};
```

First, you take the given `props` from React Router and pass it into the component, so that the component can use `match`, `location` or `history` props if necessary. Then you add your own extra props into it. The example above use arbitrary `admin` props as example.

You can see the full code [here](https://codesandbox.io/s/2vrx41m6jn).

Now you've learned about React Router, try to implement it for your React application!


---
Struggling to learn React? [This book](https://sebhastian.com/react-distilled/) might help you out!