Reactjs 更改url时使用路由器保持状态进行重新复制

我有一个问题：

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

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

当我通过单击

链接导航到
关于
时，一切正常，我的存储没有重置，但问题是：
当我手动或刷新页面（点击F5）在地址栏中输入URL时，有没有办法保持该状态

谢谢你
 刷新页面后，Redux store应用程序将立即解除状态：

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

redux中有一种称为热重新加载的方法，它不会在刷新后丢失数据

但是，如果您当前的代码存储将重置，这是预期的行为。
虽然本地存储似乎是解决方案，但如果所有页面上都有您想要的内容，您应该在
componentDidMount
生命周期挂钩中调度操作，以获取
应用程序中的
组件中的数据

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

这是一个很好的解决方案，适用于需要存储“配置文件信息”等信息的情况，这些信息可以随时在每个页面上访问。
您似乎讨论了两种不同的用例：导航到另一个页面（或返回浏览器历史堆栈），而不失去当前的Redux状态，以及在刷新时或站点访问之间保持状态。前面的答案已经涵盖了第二个问题，但是第一个问题可以通过React Router的
useHistory
hook实现。以下是官方文件中的一个示例：

// 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>
  );
}

//https://reactrouter.com/web/api/Hooks/usehistory
从“react router dom”导入{useHistory}；
函数HomeButton（）{
让历史=使用历史（）；
函数handleClick（）{
历史推送（“/主页”）；
}
返回(
回家吧
);
}

示例中的按钮可以替换为任何HTML元素，包括
，也可以使用此钩子在
handleClick
函数中运行其他检查或业务逻辑，例如重置一些“当前”的Redux状态，在出发前将页面上输入的内容保存到州/本地存储中，等等。
谢谢，老实说，我对本地存储有过想法，但想知道是否奇迹般地有其他方法@
localStorage
中的AmirShahbabaie即使在您关闭选项卡后，数据仍将保持不变，但在
sessionStorage中，数据在关闭选项卡（即关闭会话）后将丢失。因此，根据需要，您可以在
redux
、
sessionStorage
和
localStorage
中选择使用redux Persist怎么样？您可以使用redux Persist。我在redux persist中看到的唯一问题是维护多个选项卡缓存。
// 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>
  );
}