はじめに
Navigation1.0の命令的かつ構造化不要なルーティングに慣れていると、go_routerは概念が複雑に感じます。
そこで、今更ながら整理し以下にまとめてみます。
基本概念
go_routerにおけるルーティングは、アプリケーション内の「場所」を定義し、その場所への移動方法を提供する仕組みです。これは、WebブラウザのURLに似た概念です。
Route（ルート）
- RouteはアプリケーションのURLパスと、そのパスに対応するWidgetを結びつける定義です
- 各Routeは一意のパスを持ち、そのパスはアプリケーション内での位置を表します
- Routeには、静的なパス（/home）と動的なパス（/user/:id）があります
Page（ページ）
- Pageは実際に表示されるWidgetを指します
- 一つのRouteは一つのPageに対応します
- Pageは独立したWidget階層を持ち、他のPageと状態を共有しません
Location（ロケーション）
- LocationはアプリケーションでのRouteの現在の状態を表します
- URLパス、クエリパラメータ、その他の状態情報を含みます
- これはNavigator 1.0のRouteと似ていますが、より構造化されています
Router（ルーター）
- Routerは全てのRouteを管理し、現在のLocationに基づいて適切なPageを表示する中央制御システムです
- URLの解析、ページの遷移、履歴の管理を担当します
Navigationの仕組み
Navigator 1.0との主な違い
- Navigator 1.0は命令的なAPIを使用（push/pop）
- go_routerは宣言的なアプローチを採用（URLベース）
- パスベースのルーティングにより、より予測可能で管理しやすい遷移が可能
ネストされたナビゲーション
- Routeは階層構造を持つことができます
- 親Routeは子Routeのための「シェル」として機能します
- これにより、複雑なナビゲーション構造を整理された形で実現できます
シェル（Shell）
シェルは、以下のような特徴を持つ親Routeです。
構造的な役割
- 複数の子ルートのための共通のUIコンテナとして機能
- 典型的な例は、下部にナビゲーションバーを持つホーム画面
- 子ルートが切り替わっても、シェルのUIは維持される
- 複数階層のネストも可能（シェルの中にシェル）
状態管理の特徴
- シェルは独自の状態を保持可能
- 子ルート間で共有したい状態をシェルで管理できる
- 子ルートが切り替わっても、シェルの状態は保持される
- 子ルートは自動的にシェルのレイアウトを継承
履歴管理の仕組み
スタック管理
- URLベースで履歴スタックを管理
- 各ルート遷移はスタックに新しいエントリを追加
- バックナビゲーションはスタックからポップ操作
履歴の操作
- push：新しいルートをスタックに追加
- replace：現在のルートを新しいルートで置き換え
- go：指定された数だけスタックを移動
- pop：最新のルートをスタックから削除
- リダイレクト：履歴に残さない遷移が可能
おわりに
機能を組み合わせることで、複雑なナビゲーション要件にも対応できます。
Fivotのエンジニアチームがお送りするBlogです。技術の話題に限らず、それぞれのエンジニアメンバーが個人的に語りたい雑多なトピックを発信していきます。社内の雰囲気が少しでも伝われば幸いです。
Discussion