如何使用react-router维持状态

Question

我有一个带有主App.js文件的react应用程序，该文件保存了我的初始状态。然后，我需要设置一些路线来浏览我的应用程序。

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

window.location.href = '/';

然后，这会将我们引导到我们的主页。但是，一旦主页呈现，状态将恢复为App.js中详细说明的初始设置。我不知道为什么将我重新路由到网站的另一部分后仍无法保持状态。鉴于我正在使用react-router，这是否意味着我需要使用redux处理应用程序的状态？

Answer 1

之所以发生这种情况，是因为您是使用窗口对象而不是响应路由器进行重定向的。您不需要使用redux。要使用React Router，您需要使用其历史记录方法。然后在组件内部按如下所示使用它：

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

例如，采用以下反应功能组件：

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

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

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

Answer 2

使用Reach Router作为Link作为路由工具：

import { Link } from '@reach/router'

<Link to="/">Homepage</Link>

这将告诉“到达路由器”呈现其他组件（例如，用“首页”代替“设置”），从而保持状态。