`<RouterProvider>`

宣告類型

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

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

所有資料路由器物件都會傳遞給此元件，以渲染您的應用程式並啟用其他資料 API。

由於在資料 API 設計中解構了擷取與渲染，您應該在 React 樹之外建立路由器，並使用靜態定義的路線組。如需瞭解這項設計的更多資訊，請參閱改造 React Router 部落格文章和何時擷取會議演講。

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 }}
    />
  );
}