The Reach Router Tutorial
A quickstart to using Reach Router in your React app
In the last project I did I used Reach Router and I think it’s the simplest way to have routing in a React app.
I think it’s much easier than React Router, which is another router I used in the past.
Here’s a 5 minutes tutorial to get the basics of it.
Installation
First, install it using
npm install @reach/router
If the
@
syntax is new to you, it’s an npm feature to allow a scoped package. A namespace, in other words.
Next, import it in your project.
import { Router } from '@reach/router'
Basic usage
I use it in the top-level React file, index.js
in a create-react-app installation, wrapping all components that I want to appear:
ReactDOM.render(
<Router>
<Form path="/" />
<PrivateArea path="/private-area" />
</Router>,
document.getElementById('root')
)
The path
attribute I add to the components allows me to set the path for them.
In other words, when I type that path in the browser URL bar, Reach Router shows that specific component to me.
The /
path is the index route, and shows up when you don’t set a URL / path beside the app domain. The “home page”, in other words.
The default route
When a user visits an URL that does not match any route, by default Reach Router redirects to the /
route. You can add a default
route to handle this case and display a nice “404” message instead:
<Router>
<Form path="/" />
<PrivateArea path="/private-area" />
<NotFound default />
</Router>
Programmatically change the route
Use the navigate
function to programmatically change the route in your app:
import { navigate } from '@reach/router'
navigate('/private-area')
Link to routes in JSX
Use the Link
component to link to your routes using JSX:
import { Link } from '@reach/router'
<Link to="/">Home</Link>
<Link to="/private-area">Private Area</Link>
URL parameters
Add parameters using the :param
syntax:
<Router>
<User path="users/:userId" />
</Router>
Now in this hypothetical User component we can get the userId
as a prop:
const User = ({ userId }) => (
<p>User {userId}</p>
)
Nested routes
I showed you how routes can be defined in this way in your top level React file:
<Router>
<Form path="/" />
<PrivateArea path="/private-area" />
</Router>
You can define nested routes:
<Router>
<Form path="/" />
<PrivateArea path="/private-area">
<User path=":userId" />
</PrivateArea>
</Router>
So now you can have your /private-area/23232
link point to User component, passing the userId
23232
.
You can also choose to allow a component to define its own routes inside it. You use the /*
wildcard after the route:
<Router>
<Form path="/" />
<PrivateArea path="/private-area/*" />
</Router>
then inside the component you can import Router again, and define its own set of sub-routes:
//component PrivateArea
<Router>
<User path="/:userId" />
</router>
Any route using /private-area/something
will be handled by the User component, and the part after the route will be sent as its userId
prop.
To display something in the /private-area
route now you also need to add a /
handler in the PrivateArea
component:
//component PrivateArea
<Router>
<User path="/:userId" />
<PrivateAreaDashboard path="/" />
</router>
→ 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