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

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

routes/root.jsxfunction Root() {
  return <div>Hello Router!</div>;
}

export default Root;

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

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

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

main.jsximport Root from './routes/root';