React Router : 모든 경로를 배열로 가져 오기

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>