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

Posted 2021-05-05

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

它是一个商店应用程序，我想与我的服务器同步，以便当应用程序加载时，它从数据库加载应用程序与正确的东西。因此，如果有人在他们的篮子里有产品，我希望他们在应用程序加载时放在篮子里

我在努力想办法做到这一点。我想在componentDidMount中调用它，但只调用特定组件，所以如果用户要打不同的路线，那么它就不会被调用，并且篮子不会被同步。那么有没有办法在每次路线变更时调用一个函数？或者我问题的另一种解决方案？

答案

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

<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>