React Routerのルート

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

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

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

interface 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コンポーネントのプロパティとして記述することもできました。その場合、コードの一部は次のようになります：

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

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

import {
	createRoutesFromElements,
	createBrowserRouter,
	RouterProvider,
	Route,
} from 'react-router-dom';

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

これまでのレッスンの課題で作成したアプリケーションを使ってください。ルーター作成のコード部分（古いものはとりあえずコメントアウトしておきます）を、レッスンで紹介した代替のJSX構文を使って書き直してみてください。アプリケーションが動作することを確認してください。

元のコードをすべて元に戻し、新しいコードは削除してください。アプリケーションが動作することを確認してください。