← flaviocopes.com

The Reach Router Tutorial

Published Jul 27 2019

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>