Best ReactJS Router Libraries

A curated list of the best Router libraries.

1. react-router

React Router is a lightweight, fully-featured routing library for the React JavaScript library.

React Router runs everywhere that React runs; on the web, on the server (using node.js), and on React Native.

Read more

---

2. react-location

react-location is an Enterprise Client-Side Routing for React.

Here are its main features:

• Asynchronous routing
  • Promise-based data loaders
  • Asynchronous route elements
  • Threshold-based pending route elements
  • Error boundary route elements
  • Code-splitting
  • Post-render async loader APIs (stale-while-revalidate, external cache integration)
  • Navigation batching with graceful replace/push escalation
• Deeply integrated Search Params API
  • JSON-first Search Params
  • Full <Link> and useNavigate integration
  • Full cmd+click support
  • Search Param Immutability w/ Structural Sharing
  • Batched Updates / Functional Updates
  • Route Matching
  • Optional Compression w/ JSURL plugin or your own custom parser/serializer!
• Hooks for everything: Router, Matches, Route Matching, Preloading
• Optional route filtering/ranking
• Optional JSX route definitions
• Prepackaged simple cache implementation for route loader caching
• Easy Integration w/ external caches and storage (eg. React Query, Apollo, SWR, RTKQuery)

Read more

---

3. navi

navi is a declarative, asynchronous routing for React.

Navi is now unmaintained. It is a JavaScript library for declaratively mapping URLs to asynchronous content.

It comes with:

• A set of modern React components and hooks, with Suspense support
• A static HTML generation tool that works with create-react-app without ejecting
• Great TypeScript support

Quick Start

At it's core, Navi is just a router. You can use it with any React app – just add the navi and react-navi packages to your project:

npm install --save navi react-navi

If you'd like a more full featured starter, you can get started with Create React/Navi App:

npx create-react-navi-app my-app
cd my-app
npm start

Or if you want to create a blog, use create-react-blog:

npx create-react-blog react-blog
cd react-blog
npm start

Getting Started

For a full introduction, see the Getting Started guide on the Navi website.

Building and Testing Navi

To contribute code to Navi, you'll need to be able to build it and run the tests. To start, make sure you have lerna 3.x installed globally:

npm install -g lerna

Then fork, clone and bootstrap the repository:

lerna bootstrap
yarn build
yarn test

If you're working on Navi itself, it's often easier to run builds and tests from packages/navi

cd packages/navi
yarn test:watch

The examples are set up to use the copy of Navi at packages/navi/dist, so they can also be useful for quickly testing changes.

License

Navi is MIT licensed.

Read more

---

4. universal-router

Universal Router is a simple middleware-style router that can be used in both client-side and server-side applications.

Features

• It has simple code
  with only single path-to-regexp dependency.
• It can be used with any JavaScript framework such as
  React, Vue, Hyperapp etc.
• It uses the same middleware approach used in Express and Koa,
  making it easy to learn.
• It supports both imperative and
  declarative routing style.
• Routes are plain JavaScript
  objects
  with which you can interact as you like.

Installation

Using npm:

npm install universal-router --save

Or using a CDN like
unpkg.com or
jsDelivr
with the following script tag:

<script src="https://unpkg.com/universal-router/universal-router.min.js"></script>

You can find the library in window.UniversalRouter.

How does it look like?

import UniversalRouter from 'universal-router'

const routes = [
  {
    path: '', // optional
    action: () => <h1>Home</h1>
  },
  {
    path: '/posts',
    action: () => console.log('checking child routes for /posts'),
    children: [
      {
        path: '', // optional, matches both "/posts" and "/posts/"
        action: () => <h1>Posts</h1>
      },
      {
        path: '/:id',
        action: (context) => <h1>Post #${context.params.id}</h1>
      }
    ]
  }
]

const router = new UniversalRouter(routes)

router.resolve('/posts').then(html => {
  document.body.innerHTML = html // renders: <h1>Posts</h1>
})

Play with an example on JSFiddle,
CodePen,
JS Bin in your browser or try
RunKit node.js playground.

Read more

---

5. wouter

wouter is a tiny router for modern React and Preact apps that relies on Hooks.

A router you wanted so bad in your project!

Features

• Zero dependency, only 1.36 KB gzipped vs 11KB React Router.
• Supports both React and Preact! Read "Preact support" section for more details.
• No top-level <Router /> component, it is fully optional.
• Mimics React Router's best practices by providing familiar
  Route, Link, Switch and Redirect components.
• Has hook-based API for more granular control over routing (like animations): useLocation, useRoute and useRouter.

Getting Started

Check out this demo app below in order to get started:

import { Link, Route } from "wouter";

const App = () => (
  <div>
    <Link href="/users/1">
      <a className="link">Profile</a>
    </Link>

    <Route path="/about">About Us</Route>
    <Route path="/users/:name">
      {(params) => <div>Hello, {params.name}!</div>}
    </Route>
    <Route path="/inbox" component={InboxPage} />
  </div>
);

Read more

---

6. curi

Curi is a JavaScript router for single-page applications.

Check the Documentation website

Read more

---