javascript - react 路由器 : get all routes as array

标签 javascript reactjs react-router

是否有现有库可以将我的路由实例缩减为路径数组?

示例:

    <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 router 表示路由的不同方式。

最佳答案

因为我没有找到任何东西,所以我最终为此创建了一个库......

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

关于javascript - react 路由器 : get all routes as array,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37800296/

相关文章:

javascript - 如何从 '/functions' 以外的目录部署函数?

javascript - 访问 href 内的父元素

node.js - 如何从本地网络中的另一台电脑访问我的 React 应用程序?

javascript - 如何在 ReactJS 中切换类 onClick?

javascript - react 路由器 : catch a login-success url with a token being passed then redirect to homepage

javascript - HTML5 Canvas画线点间距离

javascript - 如何将事件对象传递给 Javascript 中的函数?

javascript - 如何在 ReactJS 中的子组件( sibling )之间共享状态?

javascript - 我如何异步拦截点击

react-router - 在组件之外获取参数