Reach Router | React Routing made Easy

React Router is currently at version 4 of its release and is by leaps and bounds the most popular means to scaffolding dynamic routing within React applications. As shown below it has over 33,000 stars on Github, 442 contributors and over 4,000 commits. It’s incredibly active and has fantastic documentation. So why look at an alternative? Because we as developers are always trying to make our lives simpler.

Reach Router has only been active for around 5 months but is already gaining considerable traction in the React community because of its simple syntax and ability to very simply create complex routing patterns. If you’re in a hurry, or just want to see Reach Router in action, skip on down to the bottom of the article for a live example.

React Router vs. Reach Router (statistics as of Nov 4th 2018)

I am not going to spend too much time on the inner-working of React Router so I assume you’ve had some experience using it. If you haven’t, not to worry, you’ll still be able to follow along. However, you’ll just be getting one half of the argument here. There are a ton of fantastic blogs on how to get started using React Router. Here is my favorite one: https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf.

The thing that lead me down the path to Reach Router was that while using React Router on a project I kept running into an issue where when I re-directed the routing it updated the URL but not the DOM. After a bit of digging I discovered that this is a common issue (https://stackoverflow.com/questions/44356360/react-router-work-on-reload-but-not-when-clicking-on-a-link).

This occurs when a component uses Link, or any other Router props, and doesn’t receive the Router props either directly from Route or from the parent Component. The fix is to wrap the component with a higher order component called withRouter. This can at times be incredibly clunky, particularly when using Redux and having to then wrap the withRouter HOC by the connect HOC. There are other idiosyncrasies when dealing with React Router such as having to consider the order of routing in a Switch component as well as things like deciding if a path needs to be an exact path match or not. Luckily all of these problems are made simple with Reach Router.

To get started, install Reach Router in your project by,

npm install @reach/router or yarn add @reach/router

The structure of Reach Router is really simple. Routers select a child to render based on the child’s path. You as the developer simply specify your desired slug (a slug is the part of a URL which identifies a page using human-readable keywords). You can specify as many Routers as you like. In this example I’m only using one to keep things simple.

import { Router } from "@reach/router"
<Router>
  <ComponentX path="your" /> // http://www.whatever.com/your
  <ComponentY path="slug" /> // http://www.whatever.com/slug
  <ComponentZ path="here" /> // http://www.whatever.com/here
  ...
</Router>

Now that you have the routing and slugs specified all you need to do is create links to those paths. This is done using the Link component. These replace the anchor tags (e.g. <a href=”https://www.google.com"> Google </a>). Reach Router & React Router are fantastic because they offer us dynamic routing. The initial routing takes place as your app is rendering, not in a framework outside of a running app as is done with static routing. Anchor tags will still work but they will affect the user experience as it will force a page refresh.

import { Link } from "@reach/router"
<Link to="your">ComponentX</Link>
<Link to="slug">ComponentY</Link>
<Link to="here">ComponentZ</Link>

Another great feature of Reach Router is nested routing. Wrapping a component, within another, makes it a child of that component’s routing. The nested component’s slug is appended to that of its parent.

import { Router } from "@reach/router"
<Router>
  <ComponentA path="one"> // http://www.whatever.com/one
    <ComponentB path="two"> // http://www.whatever.com/one/two
    <ComponentC path="three"> // http://www.whatever.com/one/three   
  </ComponentA> 
</Router>

Another really cool ability is parsing data from the URL into a rendered component. Specifying a colon in front of a parameter makes it dynamic. In the example below I’ve specified :stuffId in the Item component path. This will then mean that the prop stuffId will be available within the Item component.

import { Router } from "@reach/router"
<Router>
  <Item path="stuff/:stuffId" />  // http://www.whatever.com/stuff/1
</Router>

Here’s a simple example I put together to illustrate how easy it is to get up and running with Reach Router. I’m only just starting to learn this fantastic package. I’ll add layers to this example and blog post as I start to dig deeper. In the meantime check out the easy-to-follow documentation: https://reach.tech/router.