当我在地址栏中更改路由时，React-Router 正在刷新页面

Question

我正在使用 redux 和 react-redux 来更改我的应用程序的状态。

我有两个组件，Login 和 Home。

如果用户正确登录并将他导航到Home 组件，我将发送一个操作来更新状态。我在Home 组件的路由中使用了authguard 来检查用户是否登录。

但是当我通过在地址栏中键入路由导航到Home 组件时，页面正在刷新并且状态更改为其初始值。

即使我使用地址栏导航到组件，如何维护状态值？

Answer 1

如果您使用地址栏导航到组件，则必须将数据存储在localstorage。当您通过地址栏导航时，这有点像刷新页面并且整个商店都丢失了。您必须再次对 store 进行水合，才能显示之前的 redux 状态。

您可以使用诸如redux-persist 或redux-storage 之类的中间件，它们将保存redux 存储并在页面重新加载时水合redux 存储。