alansouzati/react-router-to-array

Convert your react router component to an array with all static routes

react-router-to-array

Convert your react router component to an array with all static routes. Dynamic routes and their corresponding nested static routes are ignored. No match (*) route is also ignored. See usage example below.

Install

npm install react-router-to-array

Usage

import React from 'react';
import { Route, IndexRoute } from 'react-router';
import reactRouterToArray from 'react-router-to-array';
// or var reactRouterToArray = require('react-router-to-array');

console.log(reactRouterToArray(
  <Route path="/" component={FakeComponent}>
    {/* just to test comments */}
    <IndexRoute component={FakeComponent} />
    <Route path="about" component={FakeComponent}>
      <Route path="home" component={FakeComponent} />
      <Route path="/home/:userId" component={FakeComponent} />
    </Route>
    <Route path="users" component={FakeComponent} />
    <Route path="*" component={FakeComponent} />
  </Route>)
)); //outputs: ['/', '/about', '/about/home', '/users']

Use case

I wrote this library mainly to use in conjuction with static-site-generator-webpack-plugin

License

MIT

react-router-to-array's Issues

Remove react and react-router dependencies

Since these are only used for tests, please move into devDependencies so we're not forever pinned to these old versions if we use this wonderful code.

Usage with webpack plugin

How are you going about using this with the webpack plugin when the JSX needs to be imported prior to the webpack loaders being fired? I'm actually using Typescript, but also okay leaving the JSX as raw js and not importing a TS file.

Do you have any sample code of that implementation? That'd be awesome.

BUG: `route/:param` fails

The following test fails:

const results = toArray(
  <Route path="/root">
    <Route path="/route/:param" />
  </Route>
);

expect(results).toBe([
  '/root',
  '/root/route/:param',
]);

actual([
  '/root'
]);

It bails out here: https://github.com/alansouzati/react-router-to-array/blob/master/src/index.js#L36

How do you use it with webpack?

I can't figure out how to import react-router-to-array inside webpack.config.js

(function (exports, require, module, __filename, __dirname) { import React from 'react';
                                                                                                          ^^^^^^