🍠

GoRouterでリダイレクトできない？

2023/09/07に公開

Flutter

go_router

tech

リダイレクトしないんですけど？

以前作ったテンプレート使って、FirebaseAuth + GoRouter使ってみたのですけど、リダイレクトができませんでした😱

なんか仕様が変わったらしい!

Version9.0
final isStart = state.location == '/';

Version10
final bool loggingIn = state.matchedLocation == '/login';

state.matchedLocationに変更されてた!

Github　のコードも変わってる

10.0.0

BREAKING CHANGE:
- Replaces location, queryParameters, and queryParametersAll in GoRouterState with Uri.
- See Migrating to 10.0.0 or run dart fix --apply to fix the breakages.

10.0.0

重大な変更:
- GoRouterState の location、queryParameters、queryParametersAll を Uri に置き換えます。
- 10.0.0 への移行を参照するか、dart fix --apply を実行して破損を修正してください。

コード修正したら治った🙌

state.location -> state.matchedLocationに変更したら直りました!

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:mvvm_pattern/app/views/post_view.dart';
import 'package:mvvm_pattern/auth/model/infra/firebase_provider.dart';
import 'package:mvvm_pattern/auth/views/signin_page.dart';
import 'package:mvvm_pattern/auth/views/signup_page.dart';

final goRouterProvider = Provider<GoRouter>((ref) {
  final authState = ref.watch(authStateChangesProvider);
  return GoRouter(
    initialLocation: SignInPage.relativePath,
      redirect: (BuildContext context, GoRouterState state) async {
        // ログインしていない場合は、ログインページにリダイレクトする
        if (authState.isLoading || authState.hasError) return null;

        // ログインしていなければ、ログインページにリダイレクトする
        // ignore: unrelated_type_equality_checks
        final isStart = state.matchedLocation == SignInPage.relativePath;

        // ログインしているかどうかを判定する
        // valueOrNullは、値がnullの場合はnullを返す
        final isAuth = authState.valueOrNull != null;

        // ログインしていない場合は、リダイレクトせずボタンを押すと次のページは画面遷移する
        if (isStart && !isAuth) {
          return null;
        }

        if (!isStart) {
          return null;
        }

        // ユーザーがログインしていれば、ログイン後のページへリダイレクトする
        if (isAuth) {
          return PostView.relativePath;
        }
      },
      routes: [
        GoRoute(
            path: SignInPage.relativePath,
            name: SignInPage.relativePath,
            builder: (context, state) {
              return const SignInPage();
            },
            routes: [
              GoRoute(
                path: SignUpPage.relativePath,
                name: SignUpPage.relativePath,
                builder: (context, state) {
                  return const SignUpPage();
                },
              ),
            ]),
        GoRoute(
          path: PostView.relativePath,
          name: PostView.relativePath,
          builder: (context, state) {
            return const PostView();
          },
        ),
      ]);
});

まとめ

今回は短いエラー対応の記事になりました。
画面遷移のパッケージでGoRouterを私は使うことが多くて記事をいっぱい書いてる気がします笑
今回は、ヴァージョンアップをした際にハマったエラーで躓きましたが解決できました。皆さんも新しいバージョンに変わった時に、「あれ変だな」と思ったら参考にしてみてください。
破壊的変更が多すぎて困ります💦

Githubのソースコード

リダイレクトしないんですけど？

コード修正したら治った🙌

まとめ

Discussion