如何在反应路由器内的任何路由上调用函数？答案

【问题标题】：how to call function on any route inside react router?如何在反应路由器内的任何路由上调用函数？
【发布时间】：2018-12-17 19:52:45
【问题描述】：

我正在构建一个 react/redux/thunk 应用程序。我有一些工作和渲染组件的路线。目前我有一个 Routes 文件，其中包含我在 ReactDOM 中呈现的所有路由。

它是一个商店应用程序，我想与我的服务器同步，这样当应用程序加载时，它会使用数据库中的正确内容加载应用程序。因此，如果有人在他们的购物篮中有产品，我希望他们在应用加载时出现在购物篮中

我正在努力想办法做到这一点。我正在考虑在componentDidMount 中调用它，但这只会被特定组件调用，因此如果用户要访问不同的路线，那么它不会被调用，也不会同步篮子。那么有没有办法在每次路由更改时调用一个函数？还是我的问题的不同解决方案？

【问题讨论】：

标签： javascript reactjs redux

【解决方案1】：

如果购物车信息是在每个页面/路线上使用的东西，您可能应该有一个在每个路线上加载/包含的组件 - 例如标题 - 您可以在其中调用以获取购物车数据（如果尚未加载）。

<Switch>
  <Route path='...' component={Comp1} /> // <-- wont load cart info
  <Fragment>
    <ComponentThatFetchesCartInfo/> // <-- this will get included in every route inside Fragment
    <Route path='...' component={comp2}/>
    <Route path='...' component={comp3}/>
  </Fragment>
</Switch>

【讨论】：

嗯，我有，但由于某种原因，它不会在每次路线更改时调用componentDidMount？
消费组件是否连接到redux？并使用这些数据？在上面的例子中，你仍然需要将 comp2 和 comp3 连接到 redux。
它们已连接到 redux 是的，但这并不重要，因为 componentDidMount 是反应
好的 - 所以标题将在第一次加载时加载一次，然后数据应该在每条路线上都可用。 componentDidMount 不会在路由更改时被调用，因为“header”已经加载并且数据可用。
感谢您的帮助，但发现这似乎不错：github.com/ReactTraining/react-router/issues/3554