routes.ts

概要

このファイルは必須です

リファレンスドキュメント ↗

アプリケーション内の URL パターンを route module にマッピングする設定ファイルです。

詳細については、ルーティングガイドを参照してください。

例

基本

routes をオブジェクトの配列として設定します。

app/routes.ts

import {
  type RouteConfig,
  route,
} from "@react-router/dev/routes";
 
export default [
  route("some/path", "./some/file.tsx"),
  // pattern ^           ^ module file
] satisfies RouteConfig;

route config エントリを作成するには、以下のヘルパーを使用できます。

route — route config エントリを作成するためのヘルパー関数
index — index route の route config エントリを作成するためのヘルパー関数
layout — layout route の route config エントリを作成するためのヘルパー関数
prefix — 親 route を導入することなく、一連の routes にパスプレフィックスを追加するためのヘルパー関数
relative — 指定されたディレクトリを基準にファイルパスを解決する route config ヘルパーのセットを作成します。route config を異なるディレクトリ内の複数のファイルに分割することをサポートするように設計されています

ファイルベースルーティング

設定ではなくファイル命名規約によって routes を定義したい場合、@react-router/fs-routes パッケージはファイルシステムルーティング規約を提供します。

app/routes.ts

import { type RouteConfig } from "@react-router/dev/routes";
import { flatRoutes } from "@react-router/fs-routes";
 
export default flatRoutes() satisfies RouteConfig;