在页面 url 上创建事件已更改

Posted 2023-04-14

【中文标题】在页面 url 上创建事件已更改

【英文标题】：create Event on page url changed

【发布时间】：2020-04-03 15:06:18

【问题描述】：

我正在尝试通过调用 history.push 方法来更改 react-router 中的页面。但我需要一个事件来监听页面 url 的变化并通过获取查询参数来更新上下文。如何声明该事件？

【问题讨论】：

试试componentDidMount。

怎么样？你会清除吗？我想在几个组件中使用这些参数，并且它正在从一个组件中改变。

Detect Route Change with react-router 可能重复

@ShubhamKhatri 我希望在 组件之外使用该监听方法。但这是不可能的。

你可以用路由器包裹你的***组件

【参考方案1】：

一种方法是在 history.push（同步）之后使用 url 参数更改状态，这将更新您的 UI。

从 url 读取 url 参数应该只在初始挂载时完成。

【讨论】：

但我在另一个组件中使用参数，共享这些变量的唯一方法是使用上下文

好的，另一种方法是将 props 提升到最近的共同祖先，或者使用 Redux。

【参考方案2】：

您可以将下一页所需的数据发送到history.push。

 this.props.history.push("/url",  id: 123 )

那么就可以通过下面的代码访问下一个组件中的解析数据了，

const state = this.props.location.state

【讨论】：

我不想使用 props 通过组件传递数据。因为这些数据在多个组件中使用并且会在代码中混乱