Get a list of all possible paths with react-router - reactjs

Question

I wonder if there's some way with React Router to get a list of all possible paths with the routes configuration?
For example, from this:
var routes = (
<Route name="/">
<DefaultRoute .../>
<Route name="about" .../>
<Route name="blog" .../>
</Route>
);
I'd like:
["/", "/about", "/blog"]

Answer 1

There are a couple of ways to do this:
The simplest: See your routes as an array by checking your props (this.props.routes). However, this includes a lot of extra data you aren't necessarily looking for.
More robust: Use a community-built tool like react-router-query, react-router-to-array, or react-router-sitemap. All have fairly robust read-me's you can dig into.
Someone asked a similar question on this thread with more detailed responses.

Answer 2

This seems to work for me, with v0.13:
var router = Router.create(routes);
var routePaths = [];
for (var i in router.namedRoutes) {
routePaths.push(router.namedRoutes[i].path);
}
//routePaths = ['/', '/about', '/blog']

Answer 3

I have written a function for this purpose:
/**
* Get list of paths
* #param routes {JSX.Element}
*/
const getRoutes = (routes) =>
{
const paths = new Set();
/**
* Walk in list of routes tree
* #param element {JSX.Element}
*/
const walkTree = (element) =>
{
if (element.props.children && element.props.children.length > 0)
{
element.props.children.forEach((elem) => walkTree(elem));
}
else if (element.props.path && typeof element.props.path === 'string')
{
paths.add(element.props.path);
}
}
walkTree(routes);
return paths;
};
A complete react sample (Tested with react 6):
import './App.scss';
import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Login from './pages/login.page';
import Pricing from './pages/pricing.page';
import Register from './pages/register.page';
import Home from './pages/home.page';
import Dashboard from './pages/dashboard.page';
import Authenticator from './components/Authenticator.component';
import Profile from './pages/Profile.page';
const App = () => {
const routes = (
<Routes>
<Route exact path='/login' element={<Login />} />
<Route exact path='/register' element={<Register />} />
<Route exact path='/pricing' element={<Pricing />} />
<Route path='/' element={<Authenticator />}/>
<Route exact path='/dashboard' element={<Dashboard />} />
<Route exact path='/profile' element={<Profile />} />
</Route>
<Route path='/*' element={<Home />} />
</Routes>
);
/**
* Get list of paths
* #param routes {JSX.Element}
*/
const getRoutes = (routes) =>
{
const paths = new Set();
/**
* Walk in list of routes tree
* #param element {JSX.Element}
*/
const walkTree = (element) =>
{
if (element.props.children && element.props.children.length > 0)
{
element.props.children.forEach((elem) => walkTree(elem));
}
else if (element.props.path && typeof element.props.path === 'string')
{
paths.add(element.props.path);
}
}
walkTree(routes);
return paths;
};
console.log(getRoutes(routes));
return (
<div className="App">
<main id='main' className="main">
{ routes }
</main>
</div>
);
}
export default App;