React，在包含相同组件的路由之间导航时处理抓取的最佳方式

Question

基本上，我想获取最新的数据每次用户导航到不同的标签。例如，我有针对客户的摘要页面和详细信息页面，这两个页面都包含相同的客户容器组件。我在componentDidMount函数中执行初始获取，它不会在路由更改中触发，因为组件留在DOM中。组件也不一定会收到新的道具。

一种解决方案是根据href定制获取操作的路由器链接，但我非常确定这是一种反模式，因为它使代码非常复杂，很难维护，混合了各种问题，如果目标路由不包含该组件，可能会导致双重获取。

React是否提供了生命周期钩子或机制，允许我单独获取导航事件？

我使用React-router-component和Redux。

Answer 1

据我所知，这两个标签恰好包含相同的组件，因此React重用了DOM，并且不会创建新的组件实例，对吧？

您可以使用React的特殊key属性来强制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并检查路径名是否已更改，然后在这种情况下重新获取数据。