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以编程方式从视图（ala:

 import { browserHistory } from 'react-router'

 ...

 browserHistory.push('/map');

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

Answer 1

另一种解决方案是使用上下文路由器，它允许路由器导航到应用程序的另一个部分，而无需通过生命周期方法强制更新。您只需在组件中声明contextType（为简洁起见，省略路由器实例化和其他代码）：

class MyComp extends Component {
  static contextTypes = {
    router: PropTypes.object
  }

  handleClick = () => {
    this.context.router.push('/other/route')
  }
}

出于我不知道的原因，BrowserHistory.push（）对我不起作用，尽管BrowserHistory.goBack（）和. goForward（）起作用了。

Answer 2

正如我在评论中提到的，我也遇到了同样的问题，但我已经找到了一种方法让它发挥作用。

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

我发现的解决方案（而且，完全公开，我不知道这是你应该如何实现这一点，还是它的最佳实践）是使用组件WillReceiveProps函数并与孩子一起更新this.state.children从新道具：

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

希望这有帮助！