ルートを定義する
ここでは、ファイルシステムベースのルーターの基本について学習します。ルートの定義方法、パラメータとページレイアウトの使用方法を学習します。
ルーターは、プロジェクトのルートにreact-server.config.mjsまたはreact-server.config.jsonファイルを作成することで設定できます。設定ファイルは設定オブジェクトをエクスポートし、ルートのrootパスを含める必要があります。静的ファイルのpublicパスを指定することもできます。ファイルシステムベースのルーターは、ルートディレクトリ内のファイルを自動的にスキャフォールドし、ルートディレクトリ内のファイルに基づいてルーティングを準備および構築します。
export default {
root: "src/pages",
public: "public",
};
ディレクトリとファイルは、アプリケーションが使用するルートを指定します。ルーターには、ディレクトリとファイルの名前をルートパスとルートパラメータに変換する規則が組み込まれています。新しいルートを作成するには、ルートディレクトリにファイルを作成する必要があります。
ルートファイルは、ルートをレンダリングするために使用されるReact Server Componentをデフォルトでエクスポートする必要があります。
export default function Home() {
return <h1>Home</h1>;
}
ファイルにindexまたはpageという名前を付けると、インデックスルートとして扱われます。インデックスルートは、ディレクトリのデフォルトルートです。たとえば、ルートディレクトリにindex.jsxという名前のファイルを作成すると、アプリケーションのデフォルトルートとして扱われます。about という名前のディレクトリにindex.jsx という名前のファイルを作成すると、aboutディレクトリのデフォルトルートとして扱われます。
ファイルにindexまたはpage以外の名前を付けると、名前付きルートとして扱われます。たとえば、ルートディレクトリにabout.jsxという名前のファイルを作成すると、パス/aboutを持つ名前付きルートとして扱われます。usersという名前のディレクトリにabout.jsxという名前のファイルを作成すると、パス/users/aboutを持つ名前付きルートとして扱われます。
ルートディレクトリにさらにディレクトリを作成することで、ネストされたルートを作成できます。たとえば、ルートディレクトリにusersという名前のディレクトリを作成し、usersディレクトリにindex.jsxという名前のファイルを作成すると、パス/usersを持つネストされたルートとして扱われます。usersディレクトリにabout.jsxという名前のファイルを作成すると、パス/users/aboutを持つネストされたルートとして扱われます。
ファイル名に括弧で囲んだパラメータ名を追加することで、ルートパラメータを作成できます。たとえば、ルートディレクトリに[id].jsxという名前のファイルを作成すると、パス/[id]を持つ名前付きルートとして扱われます。usersというディレクトリに[id].jsxという名前のファイルを作成すると、パス/users/[id]を持つ名前付きルートとして扱われます。ネストされたディレクトリを作成することで、ネストされたルートパラメータを作成することもできます。たとえば、ルートディレクトリにusersというディレクトリを作成し、usersディレクトリに[id].jsxという名前のファイルを作成すると、パス/users/[id]を持つネストされたルートとして扱われます。コンポーネント内のルートパラメータにReact propsとしてアクセスできるようになります。
export default function User({ id }) {
return <h1>User #{id}</h1>;
}
単一のルートセグメントで複数のルートパラメータを使用することもできます。たとえば[id]-[name].jsxという名前のファイルを作成すると、/[id]-[name]というパスパターンを持つルートとして扱われ、コンポーネントでidとnameの両方がプロパティとして受け取られます。
export default function User({ id, name }) {
return <h1>User #{id} - {name}</h1>;
}
ファイル名に括弧で囲んだパラメータ名を追加することで、複数セグメントのルートパラメータを作成できます。たとえば、ルートディレクトリに[...id].jsxという名前のファイルを作成すると、パス/[...id]を持つ名前付きルートとして扱われます。users という名前のディレクトリに[...id].jsxという名前のファイルを作成すると、パス/users/[...id]を持つ名前付きルートとして扱われます。ネストされたディレクトリを作成することで、ネストされたルートパラメータを作成することもできます。たとえば、ルートディレクトリにusersという名前のディレクトリを作成し、usersディレクトリに[...id].jsxという名前のファイルを作成すると、パス/users/[...id]を持つネストされたルートとして扱われます。
実行時のパラメータは文字列の配列になります。コンポーネント内のルートパラメータにReactプロパティとしてアクセスできるようになります。
// /[...slug].page.jsx
export default function Page({ slug }) {
return <h1>/{slug.join("/")}</h1>;
}
ファイル名に括弧で囲んだパラメータ名を追加することで、オプションセグメントのルートパラメータを作成できます。たとえば、ルートディレクトリに[[...id]].jsxという名前のファイルを作成すると、パス/[[...id]]を持つ名前付きルートとして扱われます。usersという名前のディレクトリに[[...id]].jsxという名前のファイルを作成すると、パス/users/[[...id]]を持つ名前付きルートとして扱われます。ネストされたディレクトリを作成することで、ネストされたルートパラメータを作成することもできます。たとえば、ルートディレクトリにusersという名前のディレクトリを作成し、usersディレクトリに[[...id]].jsxという名前のファイルを作成すると、パス/users/[[...id]]を持つネストされたルートとして扱われます。
省略: ディレクトリ名またはファイル名の一部を括弧で囲むことで省略できます。たとえば、ルートディレクトリに
(404).[[...slug]].page.mdxという名前のファイルを作成すると、パス/[[...slug]]を持つルートとして扱われます。これを使用することで、ルートパスに影響を与えずディレクトリ名またはファイル名に情報を追加できます。
ファイル名にlayout.jsxを含むファイルを作成することで、レイアウトを作成できます。レイアウトファイルは、レイアウトファイルと同じディレクトリ内のすべてのルートをラップするために使用されます。サブディレクトリにlayout.jsxという名前のファイルを作成することで、ネストされたレイアウトを作成することもできます。レイアウトファイル名に省略された部分を使用することもできます。たとえば、ルートディレクトリに(root).layout.jsxという名前のファイルを作成すると、ルートディレクトリ内のすべてのルートのレイアウトとして使用されます。
レイアウトコンポーネントは、ルートコンポーネントをレンダリングするために使用する必要があるchildrenプロパティを受け取ります。
export default function Layout({ children }) {
return (
<>
<h1>Layout</h1>
{children}
</>
);
}
透過セグメントは、URLにレンダリングされないセグメントですが、ファイルを自分で識別するために使用されます。透過セグメントは(transparent).page.jsxという名前のファイルを作成することで使用できます。ここで、(transparent)は透過セグメントの名前で、任意の名前にすることができます。たとえば、ルートディレクトリに(main).page.jsxという名前のファイルを作成すると、パス/のルートとして扱われます。usersという名前のディレクトリに(main).page.jsxという名前のファイルを作成すると、パス/usersのルートとして扱われます。また、ディレクトリ構造で透過セグメントを使用して、ファイルをグループ化することもできます。たとえば、(dashboard)/usersという名前のディレクトリにpage.jsxという名前のファイルを作成すると、パス/usersのルートとして扱われます。
src
- (root).layout.jsx
- (root).page.jsx
- (dashboard)
- users
- (users).page.jsx
- [userId].page.jsx
ルートセグメントを中括弧で囲むことで、ルートセグメントをエスケープできます。たとえば、ルートディレクトリに{sitemap.xml}.server.mjsという名前のファイルを作成すると、パス/sitemap.xmlを持つ名前付きルートとして扱われます。
例: ファイルシステムベースのルーティングの基本的な例については、examples ディレクトリのPhotosの例を参照してください。