`<RouterProvider>`

类型声明

declare function RouterProvider(
  props: RouterProviderProps
): React.ReactElement;

interface RouterProviderProps {
  fallbackElement?: React.ReactNode;
  router: Router;
  future?: Partial<FutureConfig>;
}

所有数据路由器对象都传递到此组件以渲染您的应用程序并启用其余数据 API。

由于数据 API 设计中获取和渲染的解耦，您应该在 React 树之外使用静态定义的路由集创建路由器。有关此设计的更多信息，请参阅 Remixing React Router 博客文章和 When to Fetch 会议演讲。

import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    children: [
      {
        path: "dashboard",
        element: <Dashboard />,
      },
      {
        path: "about",
        element: <About />,
      },
    ],
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <RouterProvider
    router={router}
    fallbackElement={<BigSpinner />}
  />
);

`fallbackElement`

如果您没有服务器渲染应用程序，createBrowserRouter 将在挂载时启动所有匹配的路由加载器。在此期间，您可以提供一个 fallbackElement 来向用户提供一些应用程序正在运行的指示。让静态托管 TTFB 计数！

<RouterProvider
  router={router}
  fallbackElement={<SpinnerOfDoom />}
/>

`future`

一组可选的未来标志要启用。我们建议您尽早选择新发布的未来标志，以简化您最终迁移到 v7 的过程。

function App() {
  return (
    <RouterProvider
      router={router}
      future={{ v7_startTransition: true }}
    />
  );
}