React Router: get all routes as array

Question

Is there an existing library that will reduce my route instance to an array of paths?

Example:

Answer 1

I recently released a library specifically for this purpose: https://github.com/elliottsj/react-router-query

It can handle asynchronous routes (i.e. getChildRoutes / getIndexRoute), and provides not just an array of paths, but an array of "FlatRoute" objects which contain the path (fullPath), plus all of the original properties of each route, and an array of "parent" routes:

import { query } from 'react-router-query';

const routes = (
  
    
      
    
    
  
);

query('/', routes, (error, result) => {
  expect(result).toEqual([
    {
      fullPath: '/author/about'
      component: About,
      parents: [
        { path: '/', component: App },
        { path: 'author', component: Author },
      ],
    },
    {
      fullPath: '/users'
      component: Users,
      parents: [
        { path: '/', component: App },
      ],
    },
  ]);
});

Note that only "leaf" routes are included in the result: there is no "FlatRoute" object for fullPath: '/' nor fullPath: '/author'. This is to prevent including routes that are only used as a layout for child routes, e.g.

If you want a FlatRoute for /posts, simply include an IndexRoute: