Reactjs 如何使用react路由器维护状态

我有一个react应用程序，它有一个主app.js文件，保存我的初始状态。然后，我设置了一些路线来导航我的应用程序

在其中一条路线中，我有一个按钮，按下该按钮时，会处理一个设定的状态。我知道这是有效的，因为我已经记录了状态的变化。然而，它还呼吁：

window.location.href = '/';

---

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

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

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

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

例如，以以下功能组件为例：

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

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

constloginbutton=（{history}）=>(
{history.push（'/login'）；}>
登录
);

说明：上述组件从道具中解构历史记录，然后使用它重定向到登录页面

---

链接到历史api:

您应该使用随react router导入的历史api：每当初始化组件时，该组件的状态也会初始化。由于您正在导航到一个新组件，您的状态将被重新初始化。如果您希望在父级维护道具并从子级进行更改，请查看此帖子：我还建议您查看react router文档，以便更好地了解如何在组件之间导航和传递道具：