React Router: tüm rotaları dizi olarak al

Question

Rota örneğimi bir yol dizisine indirecek mevcut bir kitaplık var mı?

Örnek:

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

Çıktı

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

Bir kod birkaç satır var ve bu çözecek işlevi azaltmak yazabiliriz ama bir olup olmadığını merak ediyorum Benim için bunu yapacak ve tepki yönlendiricisini kullanarak farklı yolları temsil etmenin yollarını araştıracak mevcut kütüphane.

Answer 1

Ben bir şey bulamadık gibi, bunun için bir kütüphane oluşturarak sona erdi ...

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

bir kütüphane neden ihtiyacın olduğunu anlamıyorum. Routes ürününüz, aksesuarlarda Array olarak bulunmalıdır.

Bir örnek: Geçenlerde bu amaç için özel bir kütüphane yayımlanan

Answer 3

: https://github.com/elliottsj/react-router-query

O (yani getChildRoutes/getIndexRoute) asenkron yolları ele ve sadece bir dizi değil sağlar olabilir yollar, ancak yol (fullPath), artı her bir yolun özgün özelliklerinin tümünü ve "ana" yollar dizisini içeren bir "FlatRoute" nesnesi dizisi:

fullPath: '/' ne de fullPath: '/author' için hayır "FlatRoute" nesne vardır: Yalnızca "yaprak" yolları sonucu bulunur

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

Not. Bu, yalnızca çocuk güzergâhları için bir düzen olarak kullanılan güzergâhlar dahil, örneğin;

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

Eğer /posts için FlatRoute istiyorsanız

, basitçe dahil bir 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>