javascript - React，在包含相同组件的路由之间导航时处理获取的最佳方法

Question

基本上，每次用户导航到不同的选项卡时，我都想获取最新的数据。例如，我有客户的摘要页面和详细信息页面，它们都包含相同的客户容器组件。我正在 componentDidMount 函数中进行初始提取，该函数不会在路由更改中触发，因为组件保留在 DOM 中。组件也不一定会收到新的 Prop 。

一个解决方案是自定义路由器链接，并根据 href 分派(dispatch)获取操作，但我很确定这是一种反模式，因为它使代码复杂化很多，难以维护，混淆了关注点，并且如果目标路由尚未包含该组件，可能会导致重复获取。

React 是否提供了任何生命周期 Hook 或机制，允许我单独获取以响应导航事件？

我正在使用 React-router-component 和 Redux。

Answer 1

据我了解，这两个选项卡恰好包含相同的组件，因此 React 重用了 DOM 而没有创建新的组件实例，对吧？

您可以使用 React 的特殊 key Prop 强制 React 替换特定实例。

例如:

<div className="tab-content>
  <div key="tab-1" className="shared-component-across-tabs">
    shared-component-across-tabs
  </div>
</div>

在第二个选项卡中，您将使用 key="tab-2"。

否则您的路由处理程序组件将从路由器接收 props.location.pathname。您还可以实现 componentWillReceiveProps 并检查路径名是否已更改，并在这种情况下重新获取数据。