reactjs - browserHistory.push 不导航到新页面

Question

我已经用这个(react-router 2.0)在路由器上设置了 browserHistory:

import { browserHistory } from 'react-router'

function requireAuth(nextState, replace) {
    if (!services.auth.loggedIn()) {
        replace({
            pathname: '/login',
            state: { nextPathname: nextState.location.pathname }
        })
    }
}

export default (store) => (
  <Router history={browserHistory}>
    <Route path='/' component={AppLayout}>
      <Route path="login" component={LoginContainer} />
      <Route path="map" component={MapContainer} onEnter={requireAuth} />
    </Route>
  </Router>
);

然后我尝试在react-router中使用browserHistory以编程方式从 View 路由到新页面，ala:

 import { browserHistory } from 'react-router'

 ...

 browserHistory.push('/map');

这会将 URL 更改为/map，但不会呈现该路由中的组件。我做错了什么？

Answer 1

正如我的评论中提到的，我也遇到了同样的问题，但我找到了一种方法来解决它。

这里发生的情况是您的 Route 正在更改，但您的 AppLayout 组件实际上并未自动更新其状态。路由器似乎不会自动强制组件发生状态更改。基本上，您的 AppLayout 上的 this.state.children 不会使用新的子级进行更新。

我找到的解决方案(并且，完全公开，我不知道这是否是您应该实现此目标的方式，或者是否是最佳实践)是使用 componentWillReceiveProps 函数并使用新 props 中的子项更新 this.state.children:

componentWillReceiveProps(nextProps) {
    this.setState({
        children: nextProps.children
    });
}

希望这有帮助!