如何在 React Router v6 中导航外部组件？

在 React Router v6 中导航外部组件

在 React Router v5 中，创建一个全局历史对象并将其传递给启用路由器导航的外部组件。然而，这种方法在 v6 中不再可行。

自定义路由器方法

要解决这个问题，您可以创建一个自定义路由器来实例化历史状态，如 React Router v6 路由器。例如，对于 BrowserRouter：

<code class="javascript">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}
    />
  );
};</code>

这会将自定义历史记录对象代理到路由器中并管理导航状态。用这个自定义的替换原来的 Router：

<code class="javascript">export default function App() {
  return (
    <CustomRouter history={history}>
      <div className="App">
        {/* ... */}
      </div>
    </CustomRouter>
  );
}</code>

HistoryRouter

React Router v6 还引入了 stable_HistoryRouter 用于访问历史实例：

<code class="javascript">import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom";
import { createBrowserHistory } from "history";

const history = createBrowserHistory({ window });

ReactDOM.render(
  <HistoryRouter history={history}>
    {/* ... */}
  </HistoryRouter>,
  root
);</code>

这会导出一个实例历史库的，可以在 React 组件之外访问。

数据路由器

在 React Router v6.4 中，数据路由器可以使用新的“独立”导航方法：

<code class="javascript">import { createBrowserRouter } from 'react-router-dom';

const router = createBrowserRouter(...);

router.navigate(targetPath, options);</code>

此方法可以直接访问路由器的导航功能，允许使用数据路由器在外部组件中进行导航。

以上是如何在 React Router v6 中导航外部组件？的详细内容。更多信息请关注PHP中文网其他相关文章！