Sometimes, we want to get all routes as array with React Router.

In this article, we’ll look at how to get all routes as array with React Router.

How to get all routes as array with React Router?

To get all routes as array with React Router, we can use the react-router-to-array package.

To install it, we run

npm i react-router-to-array

Then we use it by writing

import React from "react";
import { Route, IndexRoute } from "react-router";
import reactRouterToArray from "react-router-to-array";

console.log(
  reactRouterToArray(
    <Route path="/" component={Home}>
      <Route path="about" component={About}>
        <Route path="home" component={Home} />
        <Route path="/home/:userId" component={Home} />
      </Route>
      <Route path="users" component={Users} />
      <Route path="*" component={NotFound} />
    </Route>
  )
);

to call reactRouterToArray with the Route component.

As a result, we should see an array of Route component path values logged.

Conclusion

To get all routes as array with React Router, we can use the react-router-to-array package.