Learning React? Download my free React Handbook 🔥
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>