Reactjs 基于Reach路由器组件更新Redux状态

我想在呈现路由器组件时更新应用程序的状态。例如，如果“我回家”/“我将呈现主页，但我希望触发状态更改，以便其他组件（如页脚和页眉）知道我们在主页上而不是内部页面上。目前，我在加载站点时手动解析url以检测此情况，但是，随着站点的增长，这是不可行的。我还将OneNet视为一种解决方案，但是，reach路由器不提供这种解决方案

 <Router basepath={process.env.PUBLIC_URL} className="app" >
          <LandingPageBody path="/" default/>
           //update redux state to show we are on homepage
 </Router>

//更新redux状态以显示我们在主页上

您可以在

LandingPageBody

组件中使用

componentDidMount

。这是一种反应生命周期方法，它将在安装组件时触发。您可以从该方法内部更新状态。

如果您使用的是功能组件，请使用依赖于props.match.location的useEffect函数。检查其中的条件，如果条件为真，则分派操作

（

React.useffect（（）=>{if（props.match.location===“所需路径”）分派（操作）}[props.match.location]）

）

这样，当您的路由组件加载时，它将在每次路由更改时检查路由，并让您的redux存储知道当前路径

---

对于有状态组件，您可以在componentDidUpdate生命周期中执行相同的操作。

谢谢，但是，我需要为每个路由执行此操作。是否有更清洁的解决方案？我是否需要为每条路线都这样做？例如，如果我加载了一个内部页面，我想让我的redux商店知道我现在在那个页面上，@SaadKhan，只需制作一个容器并在顶层添加这个效果，就可以了。p、 s：将其他组件渲染为此容器的子级。