如何在 React Router v6 的元件之外存取和使用歷史物件？

在React Router v6 中的元件外部導航

在React Router v5 中，可以在元件外部建立一個歷史物件並將其傳遞給Router 使用在外部環境中。然而，這在 React Router v6 中是不可能直接實現的。

自訂路由器實作

一種解決方法是實作一個自訂路由器，以與 React Router v6 路由器類似的方式實例化歷史狀態。例如：

const CustomRouter = ({ history, ...props }) => {
  const [state, setState] = useState({
    action: history.action,
    location: history.location
  });

  useLayoutEffect(() => history.listen(setState), [history]);

  return (
    <router location="{state.location}" navigationtype="{state.action}" navigator="{history}"></router>
  );
};

此自訂路由器使用自訂歷史記錄物件並管理導航狀態。然後，您可以用此自訂路由器取代預設路由器以實現所需的行為。

unstable_HistoryRouter

另一個方法是利用React Router v6匯出的unstable_HistoryRouter。它以歷史庫的實例作為道具，允許您在外部使用它。

import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom";
import { createBrowserHistory } from "history";

const history = createBrowserHistory({ window });

ReactDOM.render(
  <historyrouter history="{history}">
    {/* The rest of your app goes here */}
  </historyrouter>,
  root
);

請注意，unstable_HistoryRouter 未來可能會發生重大變更。

從直接路由器（RRDv6.4）

如果您使用React Router v6.4或更高版本並且不使用資料路由器，您仍然可以存取Rounstable_HistoryRounstable_HistoryRouter。但是，對於資料路由器，您可以利用附加到路由器物件的導航功能：

import { createBrowserRouter } from 'react-router-dom';

const router = createBrowserRouter(...);

...

router.navigate(targetPath, options);

以上是如何在 React Router v6 的元件之外存取和使用歷史物件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！