当通过 history.push() 传递时，为什么状态会在我的应用程序中丢失？答案

【问题标题】：Why is state being lost in my app when passed via history.push()?当通过 history.push() 传递时，为什么状态会在我的应用程序中丢失？
【发布时间】：2021-07-09 18:30:56
【问题描述】：

我创建了以下非常简单的 React 应用来模拟我在生产应用中看到的行为。

根组件：

import {
  BrowserRouter as Router,
  Route,
  RouteComponentProps,
  Switch,
} from "react-router-dom";
import { Home } from "./home";
import { SubRoute } from "./sub-route";

export default function Root(props) {
  return (
    <Router>
      <Switch>
        <Route path="/" exact>
          <Home {...props} />
        </Route>
        <Route path="/sub-route" exact>
          <SubRoute />
        </Route>
      </Switch>
    </Router>
  );
}

首页组件：

import { LocationDescriptor } from "history";
import * as React from "react";
import { useHistory } from "react-router-dom";
import { TestLocationState } from "./sub-route";

export const Home = () => {
  const history = useHistory();

  return (
    <>
      <h1>Home</h1>
      <button
        onClick={() => {
          const location: LocationDescriptor<TestLocationState> = {
            pathname: "/sub-route",
            state: {
              name: "STATE PAYLOAD",
            },
          };
          history.push(location);
        }}
      >
        Pass state to sub route
      </button>
    </>
  );
};

子路由组件：

import * as React from "react";
import { useLocation } from "react-router-dom";

export type TestLocationState = {
  name: string;
};

export const SubRoute = () => {
  const { state } = useLocation<TestLocationState | undefined>();
  return (
    <>
      <h1>Sub Route</h1>
      <div>state: {JSON.stringify(state)}</div>
    </>
  );
};

在虚拟应用程序中，当我单击 Home 组件中调用 history.push() 的按钮时，传递带有 state 属性的位置对象，state 不仅成功传递给 SubRoute 组件，而且如果我刷新或硬刷新，状态值依然可用。

在我的生产应用程序中（一个完全独立的应用程序，除了当然还有很多其他内容之外，还包括上述内容），状态已成功传递给 SubRoute 组件，但它不保留刷新时。是undefined。

对于导致我的生产应用与测试应用出现不同行为的原因，我感到非常困惑。它是 React Router 的东西吗？想法？

【问题讨论】：

您的路线将在 prod 中进行修改。我看到有些人使用<a href="#"... 也遇到了这个问题。
你的 react 和 react-router-dom 版本是什么？
@TopW3 react@17.0.2, react-dom@17.0.2, react-router-dom@5.2.0
我是同一个版本，效果很好。你会通过沙盒分享你的项目吗？
@TopW3 我无法分享产品仓库。只有我没有看到问题的简单 repro repo。

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

事实证明，团队中的另一位开发人员在清除状态的部分应用程序中添加了这行代码：

https://github.com/preactjs/preact-router#redirects

【讨论】：