React Router：将所有路由作为数组获取答案

【问题标题】：React Router: get all routes as arrayReact Router：将所有路由作为数组获取
【发布时间】：2016-10-14 11:51:57
【问题描述】：

是否有现有的库可以将我的路由实例简化为路径数组？

示例：

    <Route path="/" component={App}>
      <Route path="author" component={Author}>
        <Route path="about" component={About}/>
      </Route>
      <Route path="users" component={Users} />
    </Route>

输出

['/', '/author', '/author/about', '/users']

我可以编写一个只有几行代码的 reduce 函数并解决这个问题，但我想知道是否有一个现有的库可以为我做这件事，并处理使用 react 路由器表示路由的不同方式。

【问题讨论】：

这个的用例是什么？
我想使用 webpack 插件来生成静态站点。简而言之，我想在 github.io 中发布我的应用程序，并且我正在使用反应路由器。请参阅此项目：github.com/markdalgleish/static-site-generator-webpack-plugin。他们期望一系列路线作为他们的入口。
这里有一个生成站点地图react-router-sitemap，但我认为你最好使用简单的reduce（就像你说的那样），直到你有更复杂的路线
这能回答你的问题吗？ Get a list of all possible paths with react-router

标签： javascript reactjs react-router

【解决方案1】：

由于我没有找到任何东西，我最终为此创建了一个库......

https://github.com/alansouzati/react-router-to-array

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']

【讨论】：

【解决方案2】：

我不明白你为什么需要图书馆。您的 Routes 应该在道具中以 Array 的形式提供。

一个例子：

【讨论】：

从您的打印屏幕中我可以看到您正在使用普通路由（作为 JSON 对象）。另一种表示路由的可能方式是使用 JSX，它本身具有不同的结构，例如：childRoutes 表示为 props.children。另一个限制是我需要一个单级字符串数组，而且这个结构仍然是嵌套的。

【解决方案3】：

我最近专门为此发布了一个库：https://github.com/elliottsj/react-router-query

它可以处理异步路由（即getChildRoutes/getIndexRoute），并且不仅提供路径数组，还提供包含路径（fullPath）的“FlatRoute”对象数组，以及所有每条路线的原始属性，以及“父”路线的数组：

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

const routes = (
  <Route path="/" component={App}>
    <Route path="author" component={Author}>
      <Route path="about" component={About} />
    </Route>
    <Route path="users" component={Users} />
  </Route>
);

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 },
      ],
    },
  ]);
});

请注意，结果中仅包含“叶”路由：fullPath: '/' 和 fullPath: '/author' 没有“FlatRoute”对象。这是为了防止包含仅用作子路线布局的路线，例如

<Route path="/" component={App}>
  <Route path="posts" component={PostLayout}>
    <Route path="1" component={Post1} />
    <Route path="2" component={Post2} />
    <Route path="3" component={Post3} />
  </Route>
</Route>

如果您想要 /posts 的 FlatRoute，只需包含 IndexRoute：

<Route path="/" component={App}>
  <Route path="posts">
    <IndexRoute component={Posts} />
    <Route path="1" component={Post1} />
    <Route path="2" component={Post2} />
    <Route path="3" component={Post3} />
  </Route>
</Route>

【讨论】：