如何使用 react-router 维护状态

Posted 2023-02-22

【中文标题】如何使用 react-router 维护状态

【英文标题】：How to maintain state using react-router

【发布时间】：2019-03-14 12:34:00

【问题描述】：

我有一个 React 应用程序，其中包含一个主 App.js 文件，该文件保存了我的初始状态。然后我设置了一些路由来浏览我的应用程序。

在其中一条路线中，我有一个按钮，当按下它时会处理一个设置状态。我知道这很有效，因为我已经在控制台记录了状态的变化。但是，它也会调用：

window.location.href = '/';

然后这会将我们路由到我们的主页。但是，一旦主页呈现，状态就会恢复到其初始设置，如 App.js 中所述。我不知道为什么一旦我被重新路由到网站的另一部分，状态就没有得到维护。鉴于我使用的是 react-router，这是否意味着我需要使用 redux 来处理应用程序的状态？

【问题讨论】：

你应该使用通过 react-router 导入的历史 API：reacttraining.com/react-router/web/api/history

每当一个组件被初始化时，该组件的状态也会被初始化。由于您正在导航到一个新组件，因此您的状态将被重新初始化。如果您希望在父级维护道具并从子级进行更改，请查看这篇文章：***.com/questions/22639534/… 我还建议您查看 react-router 文档，以便更好地了解如何导航和传递道具到和来自组件：reacttraining.com/react-router

【参考方案1】：

发生这种情况是因为您使用窗口对象而不是反应路由器进行重定向。你不需要使用 redux。要使用 react 路由器，你需要使用它的 history 方法。然后在组件内部按如下方式使用它：

this.props.history.push('/');

以下面的 react 函数组件为例：

const LoginButton = ( history ) => (
  <button onClick=() =>  history.push('/login');  >
    Log in
  </button>
);

解释：上述组件，从props中解构历史，然后用它重定向到登录页面

历史API链接：https://reacttraining.com/react-router/web/api/history