コピーして使えるReact Router 7のコード例です。各モードでの設定、ネストしたレイアウト、パラメーター、ローダーとアクション、認証付きルート、404ページ、遅延読み込みルート、バージョン6からの移行を紹介します。
React Router 7はreact-routerという1つのパッケージで提供されます。画面を切り替えるだけのシンプルなルーティングで十分なら、アプリ全体をBrowserRouterで囲みます。一方で、ローダー、アクション、エラーバウンダリーを使いたい場合はcreateBrowserRouterとRouterProviderを組み合わせてルートを構築します。子ルートは、Outletを描画する共通レイアウトの下に入れ子にして配置します。そしてパスのセグメントはuseParamsで、クエリ文字列はuseSearchParamsで読み取ります。
よく使うAPI
以下の例はすべてReact Router 7向けに書かれており、react-routerからインポートしています。ページ上部にある小さなデモは実際に動作するので、ネストしたルートやパラメーターの動きをクリックしながら確かめられます。なお、このデモはこのサイト自体が使っているルーターのバージョンで動作しており、そのバージョン番号はデモの中に表示されています。
いいえ。バージョン7ではすべてがreact-routerからエクスポートされています。アップグレードを楽にするために従来のパッケージ名も引き続きインストールでき、同じAPIを再エクスポートしていますが、新しいプロジェクトに必要なのはreact-routerひとつだけです。
データモードはライブラリとしての使い方で、ルーター作成用の関数を使ってルートの配列を自分で組み立てます。フレームワークモードではVite用プラグインが追加され、app/routes.tsを読み取り、ルートごとにコードを分割し、型を生成し、サーバーでのレンダリングもできます。
ルートの最上位の最後の子として、パスが"*"のルートを追加します。このルートは、ほかのどのルートにも一致しなかったURLすべてを受け止めます。静的ホスティングでは、不明なパスに対してサーバーがindex.htmlを返すようにも設定し、ルーターが404ページを表示できる状態にしておきます。
いいえ。パラメーターは常に文字列として返されます。省略可能なセグメントがURLに含まれていない場合は未定義になります。数値として使うときはNumber()で変換し、変換結果が有効な数値にならなかった場合の処理も忘れずに書いてください。
ほとんどの場合は、そのまま動かせます。まずバージョン6のままバージョン7の6つのフューチャーフラグをすべて有効にして警告を解消し、それからアップグレードします。公式ガイドによれば、その後に必要な破壊的変更はパッケージ名の変更だけです。
React Router 7の3つの使い方
バージョン7ではWebアプリに必要なものが1つのパッケージにまとまっています。以前のパッケージ名は、古いインポート文を動かし続けるための再エクスポートとしてのみ残されています。
ルートはただの配列として定義します。この形にすることで、ローダー、アクション、処理中の表示、エラー用の要素といった機能が使えるようになります。インポートはすべてreact-routerから行います。
最も小さな構成で、バージョン6のコードに最も近い書き方です。ローダーやアクションの仕組みはないため、データはコンポーネントの中で取得します。
開発用パッケージに含まれるVite用プラグインがこのファイルを読み取ります。そしてルートごとにコードを分割し、各ルートモジュール用の型を./+types/に生成します。
各ルートファイルはローダーとデフォルトのコンポーネントをエクスポートします。自動生成されたRoute型のおかげで、パラメーターやローダーのデータにも正確な型が付きます。
親ルートが共通のUIを一度だけ描画し、<Outlet />が、一致した子ルートを表示する位置を示します。下の例のようにパスを持たないルートは、レイアウト専用のルートになります。
コロンで始まるセグメントはパラメーターとして扱われます。パラメーターは常に文字列なので、数値として使いたい場合は自分で変換する必要があります。
状態管理のフックと同じような感覚で使えますが、値はURLのクエリ文字列に保存されます。そのため、絞り込みの条件はページを再読み込みしても残り、リンクとして他の人と共有することもできます。
ローダーは、そのルートが描画される前に実行されます。<Form method="post">を送信するとアクションが呼ばれ、その完了後にルーターがページ上のローダーを再実行します。戻り値には普通のオブジェクトを使ってください。バージョン7ではjson()とdefer()は非推奨です。
親ルートのローダーでセッションを確認し、子ルートが描画される前にリダイレクトします。元のパスを一緒に渡しておけば、サインインが終わった後でユーザーを元のページへ戻すことができます。
このモードにはローダーがないため、ページを包むコンポーネントでログイン状態を確認し、未ログインならページの代わりに<Navigate>を描画します。
パスが*のルートは、他のどれにも一致しなかったURLをすべて受け止めます。エラー用の要素（またはコンポーネントとして書くErrorBoundary）は、ローダー、アクション、描画のいずれかで例外が発生したときに表示されます。何が投げられたのかはuseRouteErrorで確認できます。
遅延読み込みを使うと、そのルートに初めてアクセスがあった時点でコードを読み込みます。関数からは、Componentやローダーなど、後から埋めたいルートのプロパティを返します。
データルーターのルートレイアウトで<ScrollRestoration />を一度だけ描画します。新しいページに移動したときは先頭までスクロールし、ブラウザーの戻る・進む操作では以前のスクロール位置を復元します。
バージョン6ですべてのフューチャーフラグを有効にしておけば、バージョン7への移行で他のコード変更は不要なはずです。何か問題が起きたときに原因を追いやすくするため、フラグは1つずつ有効にしてリリースしてください。バージョン8もすでに公開されています。そのアップグレードも同じ方法で、7のうちに新しいv8_フラグを有効にしていきます。
バージョン6からバージョン7への移行
ページ内で動くルーターで、react-router-dom 6.30（v7ではなく、このサイトが使っているバージョン）を使っています。商品一覧を表示する/shopのレイアウト、/shop/:productIdの商品詳細ページ、?sortの検索パラメーター、そしてキャッチオールの404ページが含まれています。ルートのコードはバージョン7でも同じです。
デモ
ホーム
ショップ
リンク切れ
URL：
ショップのレイアウト
並べ替え（検索パラメーター）
名前
価格
"{id}"という商品はありません。
useParams()が返したproductId =
一覧に戻る
ライブデモ：ネストしたルートとパラメーター
ホームページです。ショップを開いてください。
404：キャッチオールのルートに一致しました。
無料で始める · クレジットカード不要