React Routerでのルートマークの作成

多くの場合、ホームページへとつながる主要なマークはルートマーク（root route）と呼ばれます。なぜなら、他のマークはその中でレンダリングされるからです。これを別のコンポーネントとして考えると非常に便利です。そのため、再度私たちのアプリケーションを取り上げ、 srcフォルダ内に別のフォルダを作成し、 routesと名付けましょう。次に、このフォルダ内に別のReactコンポーネント Root用のファイルroot.jsxを作成します。ファイル内のコードは以下のようになります：

function Root() {
	return <div>Hello Router!</div>;
}

export default Root;

では、ファイルmain.jsxのコードの一部に変更を加えましょう。なぜなら、elementの値としてこれからはコンポーネントRootを渡し、そのコンテンツは現在別ファイルroot.jsxに存在するからです：

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
	},
]);

main.jsxにコンポーネントのインポート文を忘れずに追加しましょう：

import Root from './routes/root';

過去のレッスンの課題で作成したアプリケーションを開いてください。ルートマーク用に別のReactコンポーネントRootを別ファイルroot.jsxに作成してください。このレッスンで説明されている通りです。あなたのmain.jsxに変更を加えてください。