reactjs - 如何使用react-router维护状态

Question

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

在其中一条 route ，我有一个按钮，按下该按钮会处理设置的状态。我知道这是有效的，因为我已经控制台记录了状态的变化。但是，它还会调用:

window.location.href = '/';

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

Answer 1

发生这种情况是因为您正在使用窗口对象而不是 react 路由器进行重定向。您不需要使用 redux。要使用React Router，您需要使用它的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