Question

我有一个带有react-router 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>

IndexRoute不适用于“/”

1 个答案: