如何使用react-router维护状态

Question

我有一个反应应用程序与主App.js文件,保持我的初始状态.然后我设置了一些路线来浏览我的应用程序.

在其中一条路线中,我有一个按钮,按下该按钮可处理设定状态.我知道这可行,因为我已经控制台记录了状态的变化.但是,它还要求:

window.location.href = '/';

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

Answer 1

发生这种情况是因为您使用窗口对象重定向而不是反应路由器.您不需要使用redux.要使用react路由器,您需要使用其历史记录方法.然后在组件内部使用如下:

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

例如,采取以下反应功能组件:

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

说明:上面的组件,从props中解构历史,然后用它来重定向到登录页面