動的ルート
これまでの例では、app/home.jsが/homeに対応するように、ファイル名がそのままURLのパスになる静的なルートを扱ってきました。しかし、実際のアプリケーションでは、ユーザーIDや記事IDのように、URLの一部が可変となり、その値に応じて表示するコンテンツを変えたいケースが頻繁にあります。
例えば、/users/1でユーザーIDが1の人の情報を、/users/123でユーザーIDが123の人の情報を表示するような場合です。Expo Routerでは、このような「動的ルート」を簡単に実現するための仕組みが用意されています。
パスパラメータとuseLocalSearchParams
URLパスの一部を動的なパラメータとして扱いたい場合、ファイル名またはディレクトリ名に角括弧[]を使用します。角括弧で囲まれた部分は「パスパラメータ」または「動的セグメント」と呼ばれます。例えば、ユーザーの詳細ページをリスト7のようにapp/users/[id].jsというファイルで定義したとします。
app/ ├── users/ │ └── [id].js // /users/:id にマッチ (例: /users/1, /users/abc) └── _layout.js // アプリ全体のルートレイアウト
この[id].jsというファイルは、/users/1、/users/abc、/users/xyz123のような、/users/に続く任意の文字列のパスにマッチします。マッチしたパスのidの部分（この例では1、abc、xyz123）は、コンポーネント内で取得して利用できます。こうして定義された動的セグメントの値は、expo-routerが提供するuseLocalSearchParamsフックを使って取得します。このフックは、現在のルートにマッチしたパスパラメータをキーと値のペアで持つオブジェクトを返します（リスト8）。
.js]
import { useLocalSearchParams } from 'expo-router';
import { View, Text, StyleSheet } from 'react-native';
export default function UserProfilePage() {
const { id } = useLocalSearchParams(); // (1) { id: '渡された値' } の形で取得
return (
<View style={styles.container}>
<Text style={styles.title}>ユーザープロフィール</Text>
<Text>ユーザーID: {id}</Text>
{/* ここでIDを使ってユーザーデータを取得・表示する処理などを行う */}
</View>
);
}
// (略)
（1）ではuseLocalSearchParamsを使ってidパラメータを取得し、画面に表示しています。このようにして、URLの動的な部分を画面コンポーネント内で利用できます。パスパラメータの名前（この例ではid）は任意に設定できます。例えばapp/posts/[postId].jsとすれば、useLocalSearchParamsからはpostIdというキーで値を取得できます。
動的ルートを使いこなすことで、より柔軟なナビゲーション構造を持つアプリケーションを構築できそうですね。
まとめ
本記事では、Expo Routerを活用し、より実践的なモバイルアプリのナビゲーションを構築する方法を解説しました。ファイルベースルーティングの応用的な命名規則に始まり、共通レイアウトを実現するレイアウトルート、代表的なUIパターンであるスタックナビゲーションとタブナビゲーション、そしてURLに応じてコンテンツを動的に変化させる動的ルート（パスパラメータやキャッチオールルートを含む）について、その仕組みと具体的な使用例を紹介しました。
これらの機能を組み合わせることで、静的な情報表示だけでなく、ユーザーの操作や特定のデータに応じて動的に変化する、洗練されたナビゲーション構造を持つモバイルアプリケーションを効率的に構築できるようになります。
次回は、Expo Routerのさらに高度な機能として、プログラムによる画面遷移（useRouterフックを利用したpush、replace、back操作）、アプリ外からの特定画面への直接遷移を可能にするディープリンクの実装、認証フローの実装例など、より実践的なトピックを掘り下げていきます。ご期待ください。
