React-router:如何在onEnter处理程序中获取上一个路由?

2023-11-30

我试图找到一种方法,当用户点击新路径时,在onEnter处理程序。

我的 React Router 结构如下:

    <Router history={history}>
      <div className="index">
        <Route
          path="/"
          component={ComposedAppComponent}
          onEnter={this.onEnterHandler.bind(this)}
        >
          <Route name="streamKey" path=":streamKey">
            <Route name="articleUri" path="(**)" />
          </Route>
        </Route>
      </div>
    </Router>

功能,onEnterHandler,看起来像这样:

  onEnterHandler(nextRouteState) {
    const { streamKey, splat } = nextRouteState.params;

    const nextPath = `/${streamKey}/${splat}`;
    const prevPath = // HOW DO I GET THE PREVIOUS PATH?
  }

我似乎无法找到一种方法来读取用户之前所在的路线路径...我需要在新路线和之前的路线之间进行比较。非常感谢任何有关如何解决此问题的意见。 :)

Cheers!


当用户通过地址栏导航到新路径或使用像这样的react-router时,您是否试图获取以前的路径this.context.router.push()?

如果导航正在使用react-router,也许这些简单的方法会得到你正在寻找的东西:

1. Pass prevPath using query-params

导航可能如下所示:

`<Link to="/next" query={{ prevPath: this.props.location.pathname }}> Your Next path</Link>`

现在,您可以获取 prevPath 值onEnterHandler方法通过使用这个:nextState.location.query.prevPath

  • Cons:查询将出现在地址栏上。
  • Pros: 你仍然可以得到你的prevPath当用户通过地址栏导航(直接路径访问)时。

2. Pass prevPath使用状态

导航可能如下所示:

`<Link to="/next" state={{ prevPath: this.props.location.pathname }}> Your Next path</Link>`

现在,您可以获取 prevPath 值onEnterHandler方法通过使用这个:nextState.location.state.prevPath

  • Cons:查询不会出现在地址栏上。
  • Pros: 你无法获得你的prevPath当用户通过地址栏导航(直接路径访问)时。

此外,这些方法的缺点是您应该分配一个prevPath值到每个链接组件中。为 Link 组件创建一个包装组件可以解决这个问题。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React-router:如何在onEnter处理程序中获取上一个路由? 的相关文章

随机推荐

  • 使用字符串变量作为变量名[重复]

    这个问题在这里已经有答案了 我有一个分配有字符串的变量 我想根据该字符串定义一个新变量 foo bar foo something else What I actually want is bar something else 您可以使用e
  • Plotly:如何检查和更改绘图图形?

    相关问题已经被问过 例如 如何搜索绘图图形特定属性的选项 Plotly 如何检查基本图形结构 版本 4 但这些问题的答案受到以下事实的限制 并非所有参数都可以通过 Python 获得 这意味着真正的答案隐藏在 JavaScript 中的某个
  • 如何合并两个priority_queue?

    我有两个priority queue with float像这样 std priority queue
  • 无法将 Null 值分配给可为 Null 的 Int32?通过绑定

    无法通过 TextBox 绑定将 null 值分配给 Int32 如果 TextBox 为空 则不会调用 Int32Null Set TexBox 周围有红色边框 表示验证异常 这作为 Int32 没有意义 可以为空 如果用户从 TextB
  • AngularJS:绑定到服务属性的正确方法

    我正在寻找如何绑定到 AngularJS 中的服务属性的最佳实践 我已经通过多个示例来了解如何绑定到使用 AngularJS 创建的服务中的属性 下面我有两个示例说明如何绑定到服务中的属性 他们都工作 第一个示例使用基本绑定 第二个示例使用
  • 如何让exe文件只在一台电脑上运行

    我使用 C 编写了一个程序 并使用高级安装程序制作了 exe 文件 它工作得很好 但我想让这个 exe 文件在一台计算机上工作 因为有些 clints 获取 exe 并将此 exe 交给另一个 我想将其保密并保护我的作品 在您想要 exe
  • OpenCV VideoWriter 帧率问题

    我正在尝试将 1080p 网络摄像头的视频录制到文件中 我在视频中设置了一个计时器 在每次试验中 视频播放器 我使用的是 VLC 报告的时间戳与视频中的时间不同步 它总是会关闭几秒钟 通常视频内计时器比玩家报告的时间快 如下所示 我将 C
  • Spring MVC 拦截器映射问题

    我有这段 XML
  • 从线程触发时,C# ShowDialog() 不会阻止主窗体

    我有一个 Windows 窗体应用程序 带有一个主窗体和多个后台线程 为了显示 好 消息 我使用以下方法实现了一个显示为模式对话框的表单ShowDialog 所有的电话ShowDialog 在主窗体的窗体级别 而不是在线程级别 实现 但有时
  • Mogenerator 和 Xcode 4 的优点/缺点

    我对核心数据集成有点陌生 并且发现了许多代码示例和教程 有些人建议使用 Mogenerator 生成实体子类 这是一种较旧的方法吗 Xcode 允许无需第三方工具即可为实体生成子类 任何人都可以提供为什么我会选择使用 Mogenerator
  • 在 JavaScript 变量中存储 HTML 或 XML 代码

    我想在 javascript 变量中存储一些 HTML XML 标记 问题是文字比较大 例如 如何将以下 XML 片段存储在 javascript 变量中
  • lushdb没有清除redis中的所有键?

    It seems there are still some keys left after i ran redis SHELL command flushdb 这些键的用途是什么以及为什么flushdb不起作用 当Redis运行时flush
  • PHP:获取与另一个字符串数组的子字符串匹配的字符串数组的数组值[关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 有两个数组 strings array Apple B
  • 语法错误 - 当前未启用对实验性语法“decorators-legacy”的支持

    我正在尝试使用装饰器构建 JS React 项目 我的 babelrc 看起来像这样 presets babel preset env babel preset react plugins babel plugin transform ru
  • 对象字段与 Django 的 ORM 的比较

    Django 的 ORM 是否支持使用小于 大于运算符来比较不同表中的列 例如 我尝试比较 Django 查询中的两个对象字段 该查询的 SQL 等效项为 SELECT a id FROM mytable a LEFT OUTER JOIN
  • 类析构函数的实际应用

    我目前正在尝试了解类和构造函数 析构函数 我理解两者的作用 但我在析构函数方面遇到了困难 因为我想不出它的实际应用 任何人都可以提供一个例子并进行解释吗 析构函数是用于释放对象分配的任何资源的特殊成员函数 最常见的例子是当类的构造函数使用n
  • Java Swing 中放置 JSeparator 后的间隙大小

    我在 Java Swing 中遇到一个简单的问题 我将代码简化为以下代码片段 我不确定如何最小化水平 JSeperator 与下一个 JTextField 之间的间隙大小 因为当前代码在两者之间产生巨大间隙 GroupLayout layo
  • SQL 游标...您会捍卫哪些用例?

    我先走了 我100 属于设定操作阵营 但是当设置逻辑时会发生什么 在整个所需的输入域上进行搜索会导致如此大的检索 以至于查询速度显着减慢 变得缓慢 或者基本上需要无限的时间 在这种情况下 我将使用一个很小的游标 或 while 循环 来处理
  • matplotlib 3d 散点图日期

    我有一个格式的日期列表15 10 2017 我尝试过以下方法 from matplotlib import pyplot import pandas as pd dates 15 10 2016 16 10 2016 17 10 2015
  • React-router:如何在onEnter处理程序中获取上一个路由?

    我试图找到一种方法 当用户点击新路径时 在onEnter处理程序 我的 React Router 结构如下