Wie schreibe ich Umleitungen auf einfache Routen neu mit reaktiven Router?

Question

Mit react 15.1.0 und react-router 2.5.2 möchte ich die folgende JSX Syntax neu zu schreiben:

<Router routes={routes} history={hashHistory}> 
    <Redirect from="/" to="/users" /> 
    <Route path="/" component={Navigation}> 
    <Route path="/users" component={UsersPage}/> 
    <Route path="/endpoints" component={EndpointsPage}/> 
    </Route> 
</Router> 

in einfache Routen, wie folgt aus:

const routes = { 
    path: '/', 
    component: Navigation, 
    childRoutes: [ 
    {path: '/users', component: UsersPage}, 
    {path: '/endpoints', component: EndpointsPage} 
    ], 
    onEnter: (nextState, replace) => replace('/users') 
}; 

React.render(<Router routes={routes} history={hashHistory}/>, element); 

jedoch das Ergebnis der letzteren immer:

Uncaught RangeError: Maximum call stack size exceeded

Die onEnter: (nextState, replace) => replace('/users') ist anscheinend nicht ausreichend, um die <Redirect from="/" to="/users" /> zu ersetzen. Wie kann ich die Umleitung erfolgreich umschreiben? Gibt es eine bessere Möglichkeit, die Navigation zu / immer bei /users enden zu lassen?

Answer 1

Es gibt eine Sache namens IndexRedirect, die ich nicht kannte. Unter Verwendung der Indexumleitung ist der richtige Weg, dies in einfachen Routen zu tun:

const routes = { 
    path: '/', 
    component: Navigation, 
    indexRoute: {onEnter: (nextState, replace) => replace('/users')}, 
    childRoutes: [ 
    {path: '/users', component: UsersPage}, 
    {path: '/endpoints', component: EndpointsPage} 
    ] 
}; 

React.render(<Router routes={routes} history={hashHistory}/>, element);