Skip to content

The Reach Router Tutorial

New Course Coming Soon:

Get Really Good at Git

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')

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>
Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. A course that helps you feel less frustrated with Git. Launching May 21, 2024. Join the waiting list!
→ Get my React Beginner's Handbook
→ Read my full React Tutorial on The Valley of Code

Here is how can I help you: