React router vs reach router: Which should you use?

React Router is undoubtedly one of the most prominent libraries for implementing routing for React apps. It was first released in May 2014 and it also grew through trial and error as React’s API changed from version to version. Later, in May 2018, Reach Router came to existence. This router is somewhat similar to the predecessor, as a result of the developer who takes all the lessons learned from developing React Router and implements it into Reach Router.

React Router vs Reach Router
React Router vs Reach Router

As far as we had concerned, the two modules certainly have identical purposes to provide a routing layer. Also, these two have the same out-of-the-box thinking, as well as the similar accessibility in some ways. However, there’s a reason that React Router and Reach Router can be differentiated. So now, we would like to show you the difference between these two routers, so you can use one of them effectively for your business.

Let’s go!

#1. The routing structure and order

Firstly, we’ll look at how the libraries prioritize which route to render and its code structures. In React Router, the <BrowserRouter> component serves as the core of your React application. This component will be also responsible for keeping your UI in sync with the URL. So, to change your application’s route, you need to use the <Link> component, which is responsible for updating the current route according to its to prop:

 const App = () => (
  <div>
     <h1>Select your route</h1>
     <BrowserRouter>
       <ul>
         <li>
           <Link to="/">Home</Link>
         </li>
         <li>
           <Link to="/about">About</Link>
         </li>
         <li>
           <Link to="/reports">Reports</Link>
         </li>
       </ul>
       {/* code omitted for brevity.. */}
     </BrowserRouter>
   </div>
 )

Compares with Reach Router, the first thing we notice in Reach Router is that we import two components instead of four components to implement the same routing. Moreover, Reach Router only needs to use Router and Link component. You also don’t need to wrap your Link component inside the Router component. In Reach Router, certainly, there is no API to help you order and prioritize your routes like the Switch component, you have to figure it out.

#2. Params & props when using React router and Reach router

So, the example will help you know better. You’ll see that in React Router, as a result, we have to implement Switch and Route for Reports component separately from the main route in App component. This is so concise for developers to perform.

 // The route
<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
  <Route path="/reports" component={Reports} />
</Switch>

// The component
const Reports = () => (
  <>
    <h1>Reports</h1>
    <Switch>
      <Route path="/reports/invoice" component={Invoice} />
      <Route path="/reports/billing" component={Billing} />
      <Route path="/reports/:reportId" component={Report} />
    </Switch>
  </>
);

As a result, with Reach Router, you can put your nested routes as children to the parent. After that, you just need to render the routes inside report component using props.children. Moreover, by putting all your routes in one document tree, you’ll be able to determine which components have nested routes by just looking at it. It’s not so obvious when you use React Router. Also, there’s more stuff involved with this module, but this is a normal fare if you’ve been using it for any amount of time.

#3. The linking comparison: React router and Reach router

Both router libraries have the <Link> component API that we have used on the previous examples. This component is certainly used to navigate around your application by pushing URL routes into your browser without refreshing the page. It will be then rendered as an a> tag on the browser.

Firstly, we’ll talk about the similarities. The Link component in both libraries has a to props in which you can pass a string URI to link to instead. Both also can pass along props you’d like to be on the a> tag such title, id, and className. Moreover, it fully sports Unix directory navigation like a> tags would. So let’s take a look at our Dashboard component of Reach Router, which has several subpages:

 import { Link } from "@reach/router";

const Dashboard = () => {
  return (
    <div>
      <div>
        <Link to="invoices">Invoices</Link>
        <Link to="team">Team</Link>
      </div>

      <!-- content -->

      <div>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/support">Support</Link>
        <Link to="../">Go Back</Link>
      </div>
    </div>
  )
}

So now, here’s where it differs. In React Router, the to props can also be an object containing a lot of different properties. Let’s take a look:

 import { Link } from "react-router-dom";

const Dashboard = ({ match, history }) => {
  return (
    <div>
      <div>
        <Link to={`${match.url}/invoices`}>Invoices</Link>
        <Link to={`${match.url}/team`}>Team</Link>
      </div>

      <!-- content -->

      <div>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/support">Support</Link>
        <a onClick={history.goBack}>Go Back</a>
      </div>
    </div>
  );
}

With React Router you have to be more specific with Link which usually means you’ll have to use match.url when you have subpaths beyond a root subpath. All of this is certainly handled by Reach Router under the hood. Also, note that you have to programmatically “go back” since there isn’t a utility for relative navigation. Moreover, Reach Router’s Link component doesn’t have the same flexibility for its to props.

#4. Passing data to components

Both router libraries certainly allow you to pass data down from the URL or props into your components. In React Router, it’s obviously recommended that you pass your data as props through its render prop. So here is an example:

 // The route
<Route 
  path="/reports/:reportId" 
  render={props => (<Report {...props} author="Alex" />)} 
/>

// The component
const Report = props => (
  <h1>Report number: {props.match.params.reportId} by {props.author}</h1>
)

So now here is how to do the same with Reach Router:

 // The route
<Report
  path="reports/:reportId"
  author="Alex"
>

const Report = props =>(
  <h1>Report number: {props.reportId} by {props.author}</h1>
)

Passing data into components with Reach Router is easier because it’s just like passing props into any other component. Also, you can’t do the same with React Router because you’re using its Route component

#5. Other API differences when having React router and reach router

Besides from the differences above, React Router has a lot more API components and props that you can use to implement a complex routing system into your application. For example, this module has MemoryRouter API that keeps the history of your “URL” in memory instead of using the browser’s address bar.

There’s also more props available for customizing your route beside the exact props that you’ve seen earlier, such as strict and sensitive. What’s more, the Reter also supports React Native, while Reach Router is focused only on supporting web applications.

Final words

That should conclude the differences between React router and Reach router. All in all, both of the modules solve the same problem of creating a routing layer. Reach Router has a path ranking feature to help you with determining the right route to render, while React Router provides several APIs that you can use to determine the “right” route to render by yourself. So, you should choose the module that may benefit more for your business.

We – ArrowHiTech is proud to be one of the most well-established outsourcing companies all around the world. That is to say, with over 12 years of experience, we can provide the best React JS Development Services for your business. Also, if you want to go through our showcase, you should visit our product page here: MageSolution or our portfolio: ArrowHiTech portfolio.

If you have any questions, don’t hesitate to contact us via email support@arrowhitech.com or our phone number +84 243 7955 813. We would love to hear every feedback from you guys.

Tags

Share