RouterProvider

摘要

为给定的 DataRouter 渲染 UI。该组件通常应位于应用程序元素树的顶部。

import { createBrowserRouter } from "react-router";
import { RouterProvider } from "react-router/dom";
import { createRoot } from "react-dom/client";

const router = createBrowserRouter(routes);
createRoot(document.getElementById("root")).render(
  <RouterProvider router={router} />
);

请注意，此组件同时从 react-router 和 react-router/dom 导出，唯一的区别是后者会自动连接 react-dom 的 flushSync 实现。除非您在非 DOM 环境中运行，否则您几乎总是希望使用 react-router/dom 中的版本。

签名

function RouterProvider({
  router,
  flushSync: reactDomFlushSyncImpl,
}: RouterProviderProps): React.ReactElement

属性

flushSync

用于刷新更新的 ReactDOM.flushSync 实现。

你通常不必担心这个问题

从 react-router/dom 导出的 RouterProvider 会在内部为您处理这个问题
如果您在非 DOM 环境中渲染，可以从 react-router 导入 RouterProvider 并忽略此属性

router

用于导航和数据获取的 DataRouter 实例。