Question

我有这个问题：

我在redux中包装了一种简单的路由技术，如下所示：

<Provider store={store}>
    <Router>
      <React.Fragment>
        <Route exact path="/" component={App} />
        <Route path="/about" component={About} />
      </React.Fragment>
    </Router>
  </Provider>

我的Link中有一个简单的App component，就像这样

<Link to="/about">About</Link>

当我通过单击About导航到Link时，一切都很好，并且商店也没有重置，但这是一个问题：当我手动或通过刷新页面（按F5键）在地址栏中输入URL时，有什么方法可以保持状态？

真的谢谢！

Answer 1

Redux store应用程序将在刷新页面后立即释放状态：

如果即使在刷新页面后仍要存储所需的内容，请使用所有浏览器中的本地存储。

redux中有一种称为热重装的功能，不会刷新后丢失数据。

但是随着您当前的代码存储区将重置，这是预期的行为。

Answer 2

尽管本地存储似乎是解决方案，但是如果在所有页面上都需要某些内容，则应该分派操作以在App生命周期挂钩中的componentDidMount组件中获取数据。

App是最主要的组件，每次加载页面时都会将数据设置到redux存储中，并且进一步的路由显然不会导致redux中的数据丢失。

对于需要存储“个人资料信息”之类的信息的情况，这是一个很好的解决方案，可以随时在每个页面上进行访问。

Answer 3

似乎您在谈论两种不同的用例：在不失去当前Redux状态的情况下导航到另一个页面（或在浏览器历史记录堆栈中返回），以及在刷新或站点访问之间保持状态。第二个已经被前面的答案所覆盖，但是第一个可以通过React Router的useHistory钩子来实现。这是官方文档中的示例：

// https://reactrouter.com/web/api/Hooks/usehistory

import { useHistory } from "react-router-dom";

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

示例中的按钮可以替换为任何HTML元素，包括<a>，也可以使用此钩子在handleClick函数中运行其他检查或业务逻辑，例如重置一些Redux状态的“当前”部分，在进入页面之前将页面上输入的内容保存到状态/本地存储中，等等。

更改网址时，路由器的redux保持状态

3 个答案: