為什么通過 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>
    </>
  );
};

子路由組件：

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()傳遞一個位置對象有state屬性，則state不僅成功地傳遞給SubRoute成分，但如果我刷新或硬刷新，狀態值仍然可用。

在我的生產應用程序（一個完全獨立的應用程序，除了包括上述內容之外，當然還有很多其他東西），狀態已成功傳遞給 SubRoute 組件，但在刷新時不會保留。 它是undefined 。

我很困惑什么可能導致我的生產應用程序與我的測試應用程序中的不同行為。 它是 React Router 的東西嗎？ 想法？

Answer 1

事實證明，團隊中的另一位開發人員在消除狀態的應用程序的一部分中添加了這行代碼：

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