基于 Reach Router 组件更新 Redux State

编程问答 2022-05-25

问题描述

我想在渲染路由器组件时更新我的​​应用程序的状态。例如，如果我回到主页“/”，我将呈现主页，但我想触发状态更改，以便页脚和页眉等其他组件知道我们在主页与内部页面上。目前，我在加载站点时手动解析 url 以检测这一点，但是，随着站点的增长，这是不可行的。我也看到 onEnter 作为解决方案，但是，这不适用于到达路由器。

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

解决方法

您可以在 componentDidMount 组件中使用 LandingPageBody。它是一个 React 生命周期方法，它将在组件挂载时触发。您可以从该方法内部更新状态。

,

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

(React.useEffect(() => { if(props.match.location === 'desired path') dispatch(action) },[props.match.location]))

这样，当你的路由组件加载时，它会在每次路由更改时检查路由，并让你的 redux store 知道当前路径。

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

reach-routerreact-routerreactjsreactjsreactjsreactjsreduxreduxreduxredux