browserHistory.push() 和 context.router.push() 有啥区别

Posted 2023-02-21

【中文标题】browserHistory.push() 和 context.router.push() 有啥区别

【英文标题】：What's the different between browserHistory.push() and context.router.push()browserHistory.push() 和 context.router.push() 有什么区别

【发布时间】：2018-05-12 07:10:54

【问题描述】：

我正在学习 React Route 来帮助我构建一个可以在成功登录后从登录页面重定向到主页的应用。

我在这里阅读了官方教程：https://github.com/reactjs/react-router-tutorial/tree/master/lessons/12-navigating

在本课中，他们介绍了两种以编程方式导航的方法，即 browserHistory 和 context.route。他们说 browserHistory 存在一个潜在问题：

如果您向路由器传递的历史记录与此处使用的不同，它将不起作用。使用 browserHistory 以外的任何内容并不常见，因此这是可以接受的做法。

你能举个例子告诉我If you pass a different history to Router than you use here是什么？

我在我的应用程序中尝试了这两种方法，但找不到任何区别。谢了！

【参考方案1】：

这是一个相当古老的教程。我建议改为查看official react router documentation。

您提供的示例直接使用 browserHistory 实例来调用历史 API 方法。如果您将 react 路由器配置为使用浏览器历史记录，这将起作用，但历史记录类型（哈希历史记录、内存历史记录等）不同，甚至可能有多个 browserHistory 实例。虽然所有不同的历史记录类型都支持 push 方法，但如果您最初将 react 路由器配置为使用哈希历史记录，但在您的组件中，您导入浏览器历史记录，则 push 调用将根本不起作用，因为您的路由器未配置为侦听该浏览器历史实例。

虽然您可以使用上下文来获取路由器实例，但更简洁的方法是使用withRouter HOC 将路由器实例作为道具注入到您的组件中。然后，您可以调用 router.push 而不必担心您使用的是哪种历史记录。

您可以阅读更多关于历史的信息here