Erstellen von React-Routern Routen in einer Funktion

Question

Ist es möglich, die <Route> Elemente über eine Funktion zu erstellen? Ich möchte verschiedene Routen/Seiten anzeigen und die Anwendung ist nicht bewusst, wie viele sie sind. Die Seiten befinden sich in dem Zustand, der in einem Array von Seitenobjekten gespeichert ist. Jedes Seitenobjekt hat eine ID, Titel, Pfad und Körperelemente (bis jetzt). Ich denke, dass mein Router soll wie folgt aussehen:

render((
 
    <Router history={browserHistory}> 
 
    <Route path="/" component={App}> 
 
     <Route path="page1" component={CommonPage}/> 
 
     <Route path="page2" component={CommonPage} /> 
 
     <Route path="page3" component={CommonPage} /> 
 
     <Route path="page4" component={CommonPage}/> 
 
     <Route path="page5" component={CommonPage} /> 
 
     <Route path="page6" component={CommonPage} /> 
 
     </Route> 
 
     <Route path="*" component={NoMatch}/> 
 
    </Route> 
 
    </Router> 
 
), document.body)

Und ich mag es wie mit einer Funktion definieren:

render((
 
    <Router history={browserHistory}> 
 
    <Route path="/" component={App}> 
 
     { 
 
     mapPagesToRoutes(pages) 
 
     } 
 
     <Route path="*" component={NoMatch}/> 
 
    </Route> 
 
    </Router> 
 
), document.body) 
 

 
mapPagesToRoutes(pages) { 
 
    return pages.map(page =>() { 
 
    if(page.type === 'CommonPage' { 
 
     return <Route path={page.path} component={CommonPage} 
 
    } 
 
    } 
 
}

Q1: Wie wird das gemacht? Q2: Wie identifiziere ich jedes mit etwas anderem als dem Pfad. Kann ich eine Art Schlüssel = page.id in <Route> verwenden?

Answer 1

Wenn Sie Eigenschaften, um Ihr Kind Route Komponenten übergeben wollen, können Sie etwas tun:

 <Route path={page.path} component={() => <CommonPage someProp={page.someProp}/>}/> 

Answer 2

Wenn Sie reagieren Routen dynamisch erstellen, dann können Sie eine Route mit einem Parameter verwenden, wie so . Hier ist Ihr Router:

render((
    <Router history={browserHistory}> 
    <Route path="/" component={App}> 
     <Route path="/page:pageNumber" pages={this.state.pages} component={CommonPage} /> 
     <Route path="*" component={NoMatch}/> 
    </Route> 
    </Router> 
), document.body) 

Dann in Ihrer CommonPage Komponente etwas wie diese:

render() { 
    return(<div>This is {this.props.params.pageNumber}</div>); 
} 

Das sollten Ihnen die Möglichkeit geben, zu jedem/pageX Route zu navigieren. Dann können Sie in der CommonPage-Komponente den Parameter pageNumber und die Eigenschaft pages (verfügbar über this.props.route.pages) vergleichen, um festzustellen, ob die aktuelle Seitennummer gültig ist