React Router: ottieni tutti i percorsi come array

Question

Esiste una libreria esistente che ridurrà la mia istanza di percorso a una serie di percorsi?

Esempio:

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

uscita

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

poter scrivere una funzione che avrà poche linee di codice e risolvere che riducono, ma mi chiedevo se c'è un libreria esistente che lo farà per me e si prenderà cura dei diversi modi di rappresentare i percorsi usando il router di reazione.

Answer 1

Come io non ho trovato nulla, ho finito per creare una libreria per che ...

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

Non capisco perché avete bisogno di una biblioteca. Il tuo Routes dovrebbe essere disponibile come Array negli oggetti di scena.

Un esempio:

Answer 3

Ho recentemente rilasciato una libreria specificamente per questo scopo: https://github.com/elliottsj/react-router-query

Può gestire percorsi asincroni (cioè getChildRoutes/getIndexRoute), e non fornisce solo un array di percorsi, ma una serie di oggetti "FlatRoute" che contengono il percorso (fullPath), oltre a tutte le proprietà originali di ogni percorso e una matrice di percorsi "parent":

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

Nota che solo "foglia" itinerari sono compresi nel risultato: non c'è alcun oggetto "FlatRoute" per fullPath: '/' né fullPath: '/author'. Questo per impedire che includano percorsi che vengono utilizzati solo come layout per percorsi secondari, ad es.

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

Se si desidera un FlatRoute per /posts, semplicemente includono una 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>