【问题标题】:In React Router v4 is it possible to subscribe for route changes?在 React Router v4 中是否可以订阅路由更改?
【发布时间】:2017-06-12 11:07:07
【问题描述】:

我想知道使用最新版本的react-router 订阅浏览器历史更改的最佳模式是什么。我正在阅读当前的documentation,但看起来唯一提到的选项是通过显式检索<Match/> 容器传递给render 函数或component 的道具。此解决方案也在此处描述:

https://stackoverflow.com/a/41006114/2817257

但是如果我想以一种干净的方式在组件树中更深入地获取路由参数怎么办?

我正在考虑创建一个容器组件,该组件从上下文中检索router 并订阅位置更改。但是,对于当前版本的4.0.0-alpha.6,即使router 对象已经在上下文中,它也只包含以下方法:

  • 块过渡
  • createHref
  • 替换为
  • 过渡到

这不是很有希望,因为看起来router 根本没有暴露history 对象。也许还有其他一些添加到上下文中的对象可能会有所帮助?

【问题讨论】:

    标签: reactjs react-router browser-history


    【解决方案1】:

    react-router 文档已关闭 ATM,但在 v3 中,您可以将 an onUpdate function 作为道具传递给 Router 组件以监听路由器状态变化。

    其他选项是导入browserHistory,这是使用history 实现的(再次v3 知识,因为v4 文档已关闭)并使用listen 订阅历史更改,就像这样

    import { browserHistory } from 'react-router'
    
    browserHistory.listen((location, action) => {
      // do whatever you need here
    })
    

    【讨论】:

    • 感谢您的回答。我认为不幸的是browserHistory 实例在react-router v4 不再可用。
    • 您可以从 'history/createBrowserHistory' 导入 createHistory,将 fn 调用分配给一个变量,并将其设置为路由器上的 history 属性。然后,无论您的历史变量暴露在哪里,您都可以访问历史。
    • 另请注意,history.pushState() 和 history.replaceState() 调用不会触发 popstate 事件,因此仅此答案不会涵盖所有路由更改。
    猜你喜欢
    • 1970-01-01
    • 2018-06-22
    • 1970-01-01
    • 2017-11-11
    • 2018-01-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多