Question

我已经在路由器上设置了browserHistory（react-router 2.0）：

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

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

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

我找到的解决方案（并且，完全披露，我不知道这是你应该如何实现这一目标，或者是否是最佳实践）是使用componentWillReceiveProps函数并更新{ {1}}来自新道具的孩子们：

this.state.children

希望这有帮助！

Answer 2

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

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

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

由于我不知道的原因，browserHistory.push（）对我不起作用，尽管是browserHistory.goBack（）和.goForward（）。

browserHistory.push没有导航到新页面

2 个答案: