日本語アーカイブ · 名前付きルート

原文・コード例・画像を保存した2021–2022年のドキュメント。

これは2021–2022年の原文アーカイブです。旧APIの例が含まれます。2026年版の英語ガイドも参照してください。

名前付きルート

ロケーション名を使ってルートに遷移するということは、URI 生成をアプリ内でハードコーディングすることになります。例えば、以下のように。

dart / example

void _tap(BuildContext context, String fid, String pid) =>
  context.go('/family/$fid/person/$pid');

これはエラーを招きがちですし、そもそも開発途中で URI の書式が変わる可能性もあります。その場合、リダイレクト機能を使用すれば古い URI でも動作するようにはできますが、本当に様々なバージョンのロケーション URI をコードのあちこちに散らばらせたいですか?

名前付きルートへの遷移

そこで登場するのが名前付きルートです。名前付きルートは URI を意識することなく、簡単にルートへの遷移を行うためのものです。 GoRoute.name パラメータを使用してルートに一意の名前を付けることができます。

dart / example

final _router = GoRouter(
  routes: [
    GoRoute(
      name: 'home',
      path: '/',
      builder: ...,
      routes: [
        GoRoute(
          name: 'family',
          path: 'family/:fid',
          builder: ...,
          routes: [
            GoRoute(
              name: 'person',
              path: 'person/:pid',
              builder: ...,
            ),
          ],
        ),
      ],
    ),
    GoRoute(
      name: 'login',
      path: '/login',
      builder: ...,
    ),
  ],

ルートに名前を付けることは必須ではありませんが、付けた場合はその名前を利用して、そのルートへの遷移を行うことができます（パラメータを含めることも可能）。

dart / example

void _tap(BuildContext context, String fid, String pid) =>
  context.go(context.namedLocation('person', params: {'fid': fid, 'pid': pid}));

namedLocation メソッドは、指定した名前を持つルートをケース・インセンシティブ方式で検索し、そのルート情報から、パラメータを含めた形で URI を生成してくれます。あるはずのパラメータの指定がなかったり、そのパスにはないパラメータを渡すとエラーが発生します。また、上記のように context オブジェクトを2度逆参照するのはいくらか不便なため、go_router では goNamed メソッドも用意しています。これによりロケーション URI の生成からナビゲーションまで、1ステップで行うことが可能です。

dart / example

void _tap(BuildContext context, String fid, String pid) =>
  context.goNamed('person', params: {'fid': fid, 'pid': pid});

さらに、pushNamed メソッドもあります。これはルートを名前で検索した後、マッチした通しルートから末端のサブルートのページのみを抜き出し、既存のページスタックに追加（プッシュ）してくれるものです。

名前付きルートへのリダイレクト

名前付きルートは、通常の遷移に加えてリダイレクトも可能です。ここでも GoRouter もしくは GoRouterState の namedLocation メソッドを使うことができます。

dart / example

// ユーザーがログインしていない場合はログインページにリダイレクト
redirect: (state) {
  // ユーザーがログインしていない場合はログインが必要
  final loggedIn = loginInfo.loggedIn;
  final loginloc = state.namedLocation('login');
  final loggingIn = state.subloc == loginloc;

  // ユーザーの元々の行き先のロケーション名をクエリパラメータに紐づける
  final homeloc = state.namedLocation('home');
  final fromloc = state.subloc == homeloc ? '' : state.subloc;
  if (!loggedIn) {
    return loggingIn
        ? null
        : state.namedLocation(
            'login',
            queryParams: {if (fromloc.isNotEmpty) 'from': fromloc},
          );
  }

  // ユーザーがログインしている場合はユーザーを元々の行き先に誘導する
  // 行き先がない場合はホーム画面へ
  if (loggingIn) return state.queryParams['from'] ?? homeloc;

  // 一切リダイレクトが不要な場合
  return null;
},

この例では、namedLocation を使って、「login」という名前のルートのロケーション名を取得し、この時点での行き先情報である subloc を比較することでユーザがログイン画面に向かうところなのか否かをチェックしています。さらに、リダイレクト用にパラメータ付きのロケーション名を生成する際にも namedLocation を使用しています。これらはすべて、URI をハードコーディングすることなく行われています。

日本語アーカイブ · 名前付きルート

名前付きルート

名前付きルートへの遷移

名前付きルートへのリダイレクト

Sources & version context