reactjs - browserHistory.push无法导航到新页面

我已经在路由器（反应路由器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以编程方式从视图ala路由到新页面：

 import { browserHistory } from 'react-router'

 ...

 browserHistory.push('/map');

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

最佳答案

正如我在评论中提到的那样，我遇到了同样的问题，但是我找到了一种使之起作用的方法。

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

我找到的解决方案（并且完全公开，我不知道这是您应该如何实现这一目标，还是最佳实践）是使用componentWillReceiveProps函数并使用子级更新this.state.children来自新道具：

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

希望这可以帮助！

关于reactjs - browserHistory.push无法导航到新页面，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35526825/