如何在 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
      {...props}
      location={state.location}
      navigationType={state.action}
      navigator={history}
    />
  );
};

此自定义路由器使用自定义历史记录对象并管理导航状态。然后，您可以用此自定义路由器替换默认路由器以实现所需的行为。

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或更高版本并且不使用数据路由器，您仍然可以访问unstable_HistoryRouter。但是，对于数据路由器，您可以利用附加到路由器对象的导航功能：

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

const router = createBrowserRouter(...);

...

router.navigate(targetPath, options);

以上是如何在 React Router v6 的组件之外访问和使用历史对象？的详细内容。更多信息请关注PHP中文网其他相关文章！