Introduction to React Router
React Router is the perfect tool to link together the URL and your React app. React Router is the de-facto React routing library, and it's one of the most popular projects built on top of React.
- Installation
- Components
- BrowserRouter
- Link
- Route
- Access the location data inside a rendered component
- Programmatically change the route
- Match multiple paths
- Inline rendering
- Match dynamic route parameter
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:
- The browser should change the URL when you navigate to a different screen
- 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.
- 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:
npm install react-router-dom
Components
The 3 components you will interact the most when working with React Router are:
BrowserRouter
, usually aliased asRouter
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:
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:
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:
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:
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:
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:
<Route path="/(about|who)/" component={Dashboard} />
Inline rendering
Instead of specifying a component
property on Route
, you can also set a render
prop:
<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.
→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025