Remixのルーティングに関するAPIを徹底解説！～ルートモジュールの設定項目について～

Remixを通じてWebを学ぶ 第6回

　RemixはReactでシングルページアプリケーションを構築する際に定番のルーティングライブラリである、React Routerを元にして生み出されたフレームワークです。そのため、画面の定義や遷移については現場で叩き上げられた実践的なAPIが揃っています。今回はRemixのルーティングに関するAPIを解説していきます。

対象読者

• Reactの基本を修めている方
• 通信回線が弱いユーザーにも高速に表示できるサイトを作りたいエンジニア
• WebブラウザとNode.jsという異なるランタイムをそれぞれキャッチアップするのが辛くなってきたエンジニア

前提環境

　筆者の検証環境は以下の通りです。

• macOS Sonoma 14.2.1
• Node.js 21.5.0
• NPM 10.2.4
• Remix 2.5.0

Remixのルートには何が書けるのか

　これまで、Remixをいくつかの側面から学んできましたが、routesフォルダ内に配置したファイルがURLのパスと連動したり、そのファイルの中に通信の実装や <head> 要素の設定を書くことになったりと、ルート（route）を表すファイル、つまり ルートモジュール はRemixのもっとも基本的な要素といえるでしょう。

　その特性から、ルートモジュールには本連載の中でもさまざまな側面から言及してきたものの、全貌としてはどのような設定項目があるのか、気になりますよね。今回は、ルートモジュールで設定できることを網羅的に解説します。

ルートモジュールからエクスポートできるもの

　本記事で着目する「ルートモジュールに設定できるもの」とは、具体的には「ルートモジュールからエクスポートすることでRemix内で特別な意味を持つ変数や関数」を指すことにします。「エクスポートする」というのは、ES Modules仕様における export や export default によって、ファイルの外部に公開することです。

　Remix v2.5.0の時点では、12個の項目があります。特に公式な区分があるわけではありませんが、以下の分類ができると筆者は考えています。

1. コンポーネントに関する設定（3項目）
2. データ授受に関する設定（5項目）
3. ルートの各種の値を定義するための設定（4項目）

　本記事では、これらの区分のうち、1についてはこの前編で解説します。2、3については次回解説します。