IndexRoute不工作的「/」

Question

我有一個與貌似反應路由器2.4路由器：

import ReactDOM from 'react-dom'; 
import React from 'react'; 
import { IndexRoute, Router, Route, browserHistory } from 'react-router'; 
import { Provider } from 'react-redux'; 
import * as Pages from 'pages'; 
import App from 'containers/App/App'; 
import store from './stores'; 

function requireAuth(nextState, replace) { 
    if (!store.getState().user) { 
    replace('/login'); 
    } 
} 

export default function render() { 
    ReactDOM.render(
    <Provider store={store}> 
     <Router history={browserHistory}> 
     <Route path="/"> 
      <Route path="login" component={Pages.Login} /> 
      <Route path="/" component={App} onEnter={requireAuth}> 
      <IndexRoute component={Pages.Dashboard} /> 
      <Route path=":list_id" component={Pages.List} /> 
      </Route> 
     </Route> 
     </Router> 
    </Provider>, 
    document.getElementById('lists') 
); 
} 

一切正常，除了IndexRoute。如果我把IndexRoute放在App上下文中，它不起作用。如果我把它放在App上下文之外，那麼它就可以工作。我怎樣才能在App上下文中定義一個「/」的路由，同時允許Login之類的其他路由超出它？

我的應用程序正確渲染this.props.children，因爲它按預期的方式工作於List組件。

Answer 1

您正在使用相同的path = '/'多次，而不是使用唯一路徑值也使登錄作爲單獨的路線。

定義的路線是這樣的：

<Router history={browserHistory}> 
    <Route path="/login" component={Pages.Login} /> 
    <Route path="/" component={App} onEnter={requireAuth}> 
     <IndexRoute component={Pages.Dashboard} /> 
     <Route path=":list_id" component={Pages.List} /> 
    </Route>  
</Router>