在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
{...props}
location={state.location}
navigationType={state.action}
navigator={history}
/>
);
};此自訂路由器使用自訂歷史記錄物件並管理導航狀態。然後，您可以用此自訂路由器取代預設路由器以實現所需的行為。
另一個方法是利用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 未來可能會發生重大變更。
如果您使用React Router v6.4或更高版本並且不使用資料路由器，您仍然可以存取Rounstable_HistoryRounstable_HistoryRouter。但是，對於資料路由器，您可以利用附加到路由器物件的導航功能：
import { createBrowserRouter } from 'react-router-dom';
const router = createBrowserRouter(...);
...
router.navigate(targetPath, options);以上是如何在 React Router v6 的元件之外存取和使用歷史物件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
