# Introduction to React Router

> Learn how React Router links the URL to your React app using BrowserRouter, Link, and Route components to show the right component for each path.

Author: Flavio Copes | Published: 2018-03-28 | Updated: 2021-02-07 | Canonical: https://flaviocopes.com/react-router/

<!-- TOC -->

- [Installation](#installation)
- [Components](#components)
- [BrowserRouter](#browserrouter)
- [Link](#link)
- [Route](#route)
- [Access the location data inside a rendered component](#access-the-location-data-inside-a-rendered-component)
- [Programmatically change the route](#programmatically-change-the-route)
- [Match multiple paths](#match-multiple-paths)
- [Inline rendering](#inline-rendering)
- [Match dynamic route parameter](#match-dynamic-route-parameter)

<!-- /TOC -->

[React](https://flaviocopes.com/react/) Router is the de-facto React routing library, and it's one of the most popular projects built on top of React.

React at its core is a very simple library, and it does not dictate anything about routing.

Routing in a Single Page Application is the way to introduce some features to navigating the app through links, which are **expected** in normal web applications:

1.  The browser should **change the URL** when you navigate to a different screen
2.  **Deep linking** should work: if you point the browser to a URL, the application should reconstruct the same view that was presented when the URL was generated.
3.  The **browser back (and forward) button** should work like expected.

**Routing links together your application navigation with the navigation features offered by the browser**: the **address bar** and the **navigation buttons**.

React Router offers a way to write your code so that **it will show certain components of your app only if the route matches what you define**.

## Installation

With [npm](https://flaviocopes.com/npm/):

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

## Components

The 3 components you will interact the most when working with React Router are:

- `BrowserRouter`, usually aliased as `Router`
- `Link`
- `Route`

`BrowserRouter` wraps all your Route components.

`Link` components are used to generate links to your routes

`Route` components are responsible for showing - or hiding - the components they contain.

## BrowserRouter

Here's a simple example of the BrowserRouter component. You import it from react-router-dom, and you use it to wrap all your app:

```js
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router } from 'react-router-dom'

ReactDOM.render(
  <Router>
    <div>{/* ... */}</div>
  </Router>,
  document.getElementById('app')
)
```

A BrowserRouter component can only have one child element, so we wrap all we're going to add in a `div` element.

## Link

The Link component is used to trigger new routes. You import it from `react-router-dom`, and you can add the Link components to point at different routes, with the `to` attribute:

```js
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Link } from 'react-router-dom'

ReactDOM.render(
  <Router>
    <div>
      <aside>
        <Link to="/dashboard">Dashboard</Link>
        <Link to="/about">About</Link>
      </aside>
      {/* ... */}
    </div>
  </Router>,
  document.getElementById('app')
)
```

## Route

Now let's add the Route component in the above snippet to make things actually work as we want:

```js
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Link, Route } from 'react-router-dom'

const Dashboard = () => (
  <div>
    <h2>Dashboard</h2>
    ...
  </div>
)

const About = () => (
  <div>
    <h2>About</h2>
    ...
  </div>
)

ReactDOM.render(
  <Router>
    <div>
      <aside>
        <Link to="/">Dashboard</Link>
        <Link to="/about">About</Link>
      </aside>

      <main>
        <Route exact path="/" component={Dashboard} />
        <Route path="/about" component={About} />
      </main>
    </div>
  </Router>,
  document.getElementById('app')
)
```

Check this example on Glitch: <https://glitch.com/edit/#!/flaviocopes-react-router-v4/>

When the route matches `/`, the application shows the **Dashboard** component.

When the route is changed by clicking the "About" link to `/about`, the Dashboard component is removed and the **About** component is inserted in the DOM.

Notice the `exact` attribute. Without this, `path="/"` would also match `/about`, since `/` is contained in the route.

## Access the location data inside a rendered component

Inside the rendered component we can see which route we are on, using the `useLocation` hook:

```js
import { useLocation } from 'react-router-dom'

//...

function Post() {
  const location = useLocation()

  console.log(location.pathname) // '/'
}
```

## Programmatically change the route

Inside the rendered component you can programmatically change the route using the `useHistory` hook:

```js
import { useHistory } from 'react-router-dom'

//...

function Post() {
  const history = useHistory()

  history.push('/post/new')
}
```

## Match multiple paths

You can have a route respond to multiple paths using a regex, because `path` can be a regular expressions string:

```js
<Route path="/(about|who)/" component={Dashboard} />
```

## Inline rendering

Instead of specifying a `component` property on `Route`, you can also set a `render` prop:

```js
<Route
  path="/(about|who)/"
  render={() => (
    <div>
      <h2>About</h2>
      ...
    </div>
  )}
/>
```

## Match dynamic route parameter

See [how to get data from a dynamic React Router route](https://flaviocopes.com/react-router-data-from-route/).