reactjs – browserHistory.push不会导航到新页面

我已经在路由器上设置了这个(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>
);

然后我试图在反应路由器中使用browserHistory以编程方式从视图ala中路由到新页面：

import { browserHistory } from 'react-router'

 ...

 browserHistory.push('/map');

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

正如我在评论中提到的那样,我遇到了同样的问题,但是我已经找到了一种方法.

这里发生的是你的路线正在改变,但你的AppLayout组件实际上并不是自动更新它的状态.路由器似乎不会自动强制组件上的状态更改.基本上,您的AppLayout上的this.state.children没有被新的孩子更新.

我发现的解决方案(和充分的披露,我不知道这是如何应该实现这一点,或者如果它是最佳实践)是使用componentWillReceiveProps函数和更新this.state.children与孩子从新的道具：

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

希望这可以帮助！

reactjs – browserHistory.push不会导航到新页面

相关文章