我有一个 React 应用程序,其中包含一个保存初始状态的主 App.js 文件。然后,我设置了一些路线来导航我的应用程序。
在其中一条路线中,我有一个按钮,按下该按钮会处理设置的状态。我知道这是有效的,因为我已经控制台记录了状态的变化。然而,它随后也调用:
window.location.href = '/';
然后,这会将我们引导至我们的主页。但是,一旦主页呈现,状态就会恢复到其初始设置,如 App.js 中详述。我不知道为什么一旦我重新路由到网站的其他部分,状态就不会得到维护。鉴于我正在使用react-router,这是否意味着我需要使用redux来处理应用程序的状态?
发生这种情况是因为您正在使用窗口对象而不是反应路由器进行重定向。您不需要使用 redux。要使用react router,你需要使用它的history方法。然后在组件内按如下方式使用它:
this.props.history.push('/');
例如,采用以下反应功能组件:
const LoginButton = ({ history }) => (
<button onClick={() => { history.push('/login'); }} >
Log in
</button>
);
解释:上面的组件,从 props 中解构历史记录,然后用它来重定向到登录页面
历史API链接:https://reacttraining.com/react-router/web/api/history https://reacttraining.com/react-router/web/api/history
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)