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

Question

我创建了以下非常简单的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>
</>
);
};

SubRoute组件：

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

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

在我的生产应用程序(一个完全独立的应用程序，除了上面的内容，当然还有很多其他内容(中，状态被成功地传递到SubRoute组件，但它在刷新时被而不是保留。它是undefined。

我很困惑是什么导致了我的生产应用程序和测试应用程序中的不同行为。这是React Router的东西吗？想法？

Answer 1

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

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