browserHistory.push 不会导航到新页面

IT技术 reactjs react-router
2021-03-26 20:10:25

我已经在路由器上设置了 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 但不会呈现该路由中的组件。我究竟做错了什么？

2个回答

正如我在评论中提到的，我遇到了同样的问题，但我找到了一种方法来使它工作。

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

我找到的解决方案（并且，完全披露，我不知道这是否是您应该实现的方式，或者是否是最佳实践）是使用该componentWillReceiveProps功能并this.state.children使用新props中的孩子进行更新：

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

希望这可以帮助！

这似乎是最好的方法，但这是我在互联网上可以找到的唯一答案，再加上 github 上非常平庸的文档。您能否以任何可能的方式对此进行扩展。我不确定应该在我的路由器的顶级组件容器中使用 componentWillReceiveProps 的确切位置？我正在使用 var children = React.Children.map(children, function (child) { return React.cloneElement(child, { user: user, key: key }); }); 在纯 js 函数中克隆我的道具。
2021-06-20 20:10:25

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

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

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

由于我不知道的原因， browserHistory.push() 对我不起作用，尽管 browserHistory.goBack() 和 .goForward() 做了。

其它你可能感兴趣的问题
上一篇ReactJS：未捕获的 ReferenceError：需要未定义 下一篇useQuery 返回未定义，但返回 gql 操场上的数据