リアクタ・ルータ：すべての経路をアレイとして取得

Question

経路インスタンスを経路の配列に縮小する既存のライブラリはありますか？

例：

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

私は数行のコードを持っており、それを解決する機能を減らす書くことができますが、そこにある場合、私は思っていました私のためにそれを行い、反応ルータを使用してルートを表現するさまざまな方法を世話する既存のライブラリ。

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

Answer 2

ライブラリを必要とする理由私は理解していません。 Routesは、小道具のArrayとしてご利用いただけます。

例：

Answer 3

私は最近、この目的のために特別にライブラリをリリース：https://github.com/elliottsj/react-router-query

それは、非同期の経路（すなわちgetChildRoutes/getIndexRoute）を処理し、だけではなく、配列を提供することができますパス（fullPath）を含む「FlatRoute」オブジェクトの配列と、各ルートのすべての元のプロパティと、「親」ルートの配列：

fullPath: '/'も fullPath: '/author'には「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 }, 
     ], 
    }, 
    ]); 
}); 

注意。これは、子ルートのレイアウトとしてのみ使用されるルートを含むことを防止するためです。

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