React Routerのルート

ルート(Routes)は、 React Routerアプリケーションの 最も重要な部分です。前のレッスンの コードの一部を見てみましょう：

main.jsxconst router = createBrowserRouter([
  {
    path: '/',
    element: <div>Hello Router!</div>,
  },
]);

この、ルーター作成時に関数に渡した オブジェクトのプロパティpathと elementが、まさに Routeオブジェクトのプロパティです。 実際には、このオブジェクトには多数の プロパティがあり、 公式ドキュメント で確認できます。 今後、そのうちのいくつかが必要になります：

jsxinterface RouteObject {
  path?: string;
  index?: boolean;
  children?: React.ReactNode;
  caseSensitive?: boolean;
  id?: string;
  loader?: LoaderFunction;
  action?: ActionFunction;
  element?: React.ReactNode | null;
  Component?: React.ComponentType | null;
  errorElement?: React.ReactNode | null;
  ErrorBoundary?: React.ComponentType | null;
  handle?: RouteObject["handle"];
  shouldRevalidate?: ShouldRevalidateFunction;
  lazy?: LazyRouteFunction<RouteObject>;
}

代替のJSXスタイルを使用して、 Routeコンポーネントのプロパティとして 記述することもできました。 その場合、コードの一部は次のようになります：

main.jsxconst router = createBrowserRouter(
  createRoutesFromElements(
    <Route
      path = '/'
      element = {<div>Hello Router!</div>}
    />
  )
);

そしてもちろん、インポートに さらに数行追加する必要がありました：

main.jsximport {
  createRoutesFromElements,
  createBrowserRouter,
  RouterProvider,
  Route,
} from 'react-router-dom';

このレッスンで紹介した両方のスタイルは同等です。 今後は、最初のバリアントを 使用していきます。