Is it possible to allow optional or empty params on a path?

[osaxma]

Use Case:
Assume I have a profile page that looks like this:

I want the user to be able to go directly to: example.com/profile and reach the page and the first tab will be the default tab.

This is similar to the profile page of Twitter PWA where the tweets tab is the default one and it's not shown on the URL:

/username
/username/with_replies
/username/media
/username/likes

Screen.Recording.2021-11-23.at.12.37.07.AM.mov

Issue
Assume I've the following GoRouter (full code is provided at end of the post):

  late final _router = GoRouter(
    urlPathStrategy: UrlPathStrategy.path,
    routes: [
      GoRoute(
        path: '/',
        pageBuilder: (context, state) {
          return MaterialPage(
            key: state.pageKey,
            child: const HomePage(),
          );
        },
        routes: [
          GoRoute(
            path: 'profile/:section',
            pageBuilder: (context, state) {
              final section = profileSectionfromString(state.params['section']!);
              return MaterialPage(key: state.pageKey, child: ProfilePage(initialSection: section));
            },
          )
        ],
      )
    ],
  );

If the user try to go directly to /profile without providing a param, the following error will occur:

The following _Exception was thrown Exception during GoRouter navigation:
Exception: no routes for location: /profile

I tried to make the last three tabs (i.e. likes, favorites and following) as sub-routes of profile, but the problem was that profile route was always pushed behind any the sub-routes (i.e. two profile pages are stacked on top of each others). For instance, if a user goes directly to /profile/likes through a URL and then hits the back button of the AppBar, the profile will show up again before they can go to home by pressing the button again.

Discussion:

Is there something that I'm missing and is this possible to achieve by other means?

If this is not possible, should this turn into feature request?

For instance, an the API could look something like this:

GoRoute(
   // the question mark indicates that the param and rest of the path after is optional and can be null/empty
  path: 'profile/?:section',
  pageBuilder: (context, state) { /* */},
)

---

Fully Runnable Code Sample

// ignore_for_file: constant_identifier_names

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routeInformationParser: _router.routeInformationParser,
      routerDelegate: _router.routerDelegate,
      title: 'Nested Navigation Example',
    );
  }

  late final _router = GoRouter(
    urlPathStrategy: UrlPathStrategy.path,
    routes: [
      GoRoute(
        path: '/',
        pageBuilder: (context, state) {
          return MaterialPage(
            key: state.pageKey,
            child: const HomePage(),
          );
        },
        routes: [
          GoRoute(
            path: 'profile/:section',
            pageBuilder: (context, state) {
              final section = profileSectionfromString(state.params['section']!);
              return MaterialPage(key: state.pageKey, child: ProfilePage(initialSection: section));
            },
          )
        ],
      )
    ],
    errorPageBuilder: (context, state) {
      return MaterialPage(
        key: state.pageKey,
        child: ErrorPage(state.error),
      );
    },
  );
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home Page'),),
      body: Center(
        child: TextButton(
          onPressed: () {
            context.go('/profile/posts');
          },
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
              Icon(Icons.person),
              Text(' Profile'),
            ],
          ),
        ),
      ),
    );
  }
}

class ProfilePage extends StatefulWidget {
  final ProfileSections initialSection;
  const ProfilePage({
    Key? key,
    required this.initialSection,
  }) : super(key: key);

  @override
  _ProfilePageState createState() => _ProfilePageState();
}

class _ProfilePageState extends State<ProfilePage> with SingleTickerProviderStateMixin {
  late final TabController _controller;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _controller = TabController(
      length: ProfileSections.values.length,
      vsync: this,
      initialIndex: widget.initialSection.index,
    );
  }

  void _tap(int index) {
    context.go('/profile/${ProfileSections.values[index].asString().toLowerCase()}');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Profile Page'),
        bottom: TabBar(
          controller: _controller,
          tabs: [for (final f in ProfileSections.values) Tab(text: f.asString())],
          onTap: (index) => _tap(index),
        ),
      ),
      body: TabBarView(
        controller: _controller,
        children: [
          for (final f in ProfileSections.values)
            Center(
              child: Text(f.asString()),
            )
        ],
      ),
    );
  }
}

enum ProfileSections {
  Posts,
  Likes,
  Favourites,
  Following,
}

ProfileSections profileSectionfromString(String string) {
  return ProfileSections.values.firstWhere(
    (element) => describeEnum(element).toLowerCase() == string.toLowerCase(),
    orElse: () => ProfileSections.Posts,
  );
}

// String profileSectionToString(ProfileSections section) => describeEnum(section); 

extension on ProfileSections {
  String asString() => describeEnum(this);
}

/// sample error page
class ErrorPage extends StatelessWidget {
  const ErrorPage(this.error, {Key? key}) : super(key: key);
  final Exception? error;

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(title: const Text('Page Not Found')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(error?.toString() ?? 'page not found'),
              TextButton(
                onPressed: () => context.go('/'),
                child: const Text('Home '),
              ),
            ],
          ),
        ),
      );
}

[csells]

optional parameters can be passed using queryParams.

[osaxma]

Hi @csells

My goal is to have all the following as valid paths without using queryParams:

example.com/username
example.com/username/with_replies
example.com/username/media
example.com/username/likes

Given that I define my path as follow:

GoRoute(
  path: 'username/:section',
  pageBuilder: (context, state) { /* */},
)

With this setup, the url for example.com/username will always give an error because :section cannot be empty and must be given.

edit: I guess the title should've been "allowing empty param "

[csells]

You could do this:

GoRoute(
  path: 'username',
  redirect: (_) => '/username/home',
  routes: [
    GoRoute(path: ':section', ...),
  ]
)

[osaxma]

I believe this should be the answer since redirection is shown on the address bar but for some reason I'm getting the following error:

The following _Exception was thrown Exception during GoRouter navigation:
Exception: GoRoute builder parameter not set

Here's a how I defined the Router:

  late final _router = GoRouter(
    urlPathStrategy: UrlPathStrategy.path,
    routes: [
      GoRoute(
        path: '/',
        pageBuilder: (context, state) {
          return MaterialPage(
            key: state.pageKey,
            child: const HomePage(),
          );
        },
        routes: [
          GoRoute(
            path: 'profile',
            redirect: (_) => '/profile/home',
            routes: [
              GoRoute(
                path: ':section',
                pageBuilder: (context, state) {
                  final section = profileSectionfromString(state.params['section']!);
                  return MaterialPage(
                    key: state.pageKey,
                    child: ProfilePage(initialSection: section),
                  );
                },
              ),
            ],
          ),
        ],
      ),
    ],

fully runnable code for repro:
https://gist.github.com/osaxma/2abfe803d44b2ebfd2f1563264005f01

[csells]

Well, that's just an embarrassing error for several reasons:

1. I told you the wrong thing to do
2. the error message is from a pre-1.0 refactor and is just wrong
3. the reason you're having this issue isn't documented
4. the error message needs to include a link to detailed docs
5. the default ErrorPage sample type doesn't use SelectableText so that even if I had provided a good error message with a link, you would've have been able to copy-paste it anyway

I believe all of that is fixed with v2.3.0. can you please verify? I'm using you as a guinea pig for the new docs. I've gotten a working version of your app running using what I think are good instructions, but I'd love you to help me test the end-to-end.

Also, I noticed that your tabbed example doesn't use didUpdateWidget as described in the nested navigation docs. The bad behavior you'll see without using didUpdateWidget is pressing the browser's back button won't update the tab based on the URL.

[osaxma]

Thanks a lot for your time @csells -- it's working as intended now.

I updated the gist to a working version based on the instructions in case someone else looks at it in the future.

[csells]

Excellent news. Thanks for helping me track down the problem with that error.

[osaxma]

Follow up:
It turns out the exact behavior that I was looking for can be achieved without redirects after all.

The main difference is that when the user is at the home tab, example.com/profile is shown in the address bar instead of example.com/profile/home (I know it's a bit pedantic 😅).

Screen.Recording.2021-11-24.at.4.46.36.PM.mov

Before this discussion, I wasn't aware that two routes can be defined as shown below (i.e. profile and profile:section). As long as the page share the same key, the behavior in the video above can be achieved.

  routes: [
    GoRoute(
      path: 'profile',
      pageBuilder: (context, state) {
        return MaterialPage(
          key: profileKey,
          child: const ProfilePage(
            initialSection: ProfileSections.Home,
          ),
        );
      },
    ),
    GoRoute(
      path: 'profile/:section',
      pageBuilder: (context, state) {
        final section = profileSectionfromString(state.params['section']!);
        return MaterialPage(
          key: profileKey,
          child: ProfilePage(
            initialSection: section,
          ),
        );
      },
    ),
  ],

Fully runnable example for reference can be found here:
https://gist.github.com/osaxma/c7e840434d6404137b7470090a10c821

[renanmgs]

Follow up: It turns out the exact behavior that I was looking for can be achieved without redirects after all.

The main difference is that when the user is at the home tab, example.com/profile is shown in the address bar instead of example.com/profile/home (I know it's a bit pedantic 😅).

Screen.Recording.2021-11-24.at.4.46.36.PM.mov
Before this discussion, I wasn't aware that two routes can be defined as shown below (i.e. profile and profile:section). As long as the page share the same key, the behavior in the video above can be achieved.

  routes: [
    GoRoute(
      path: 'profile',
      pageBuilder: (context, state) {
        return MaterialPage(
          key: profileKey,
          child: const ProfilePage(
            initialSection: ProfileSections.Home,
          ),
        );
      },
    ),
    GoRoute(
      path: 'profile/:section',
      pageBuilder: (context, state) {
        final section = profileSectionfromString(state.params['section']!);
        return MaterialPage(
          key: profileKey,
          child: ProfilePage(
            initialSection: section,
          ),
        );
      },
    ),
  ],

Fully runnable example for reference can be found here: https://gist.github.com/osaxma/c7e840434d6404137b7470090a10c821

Hi, could you provide when how you declared your "profileKey"? Im trying to achiev the same behavior for a HomePage with BottomNavigationBar but im getting the "Multiple widgets used the same GlobalKey." issue.

Im trying to do:
"/" => Homepage(tabindex:0)
"/search" => Homepage(tabindex:1)
=>"/search?s=something" => Homepage(tabindex:1, searchedTerm: "myparam")
"/live" => Homepage(tabindex:2)

But im getting so confused with the structure and how my pages should look. =c

[renanmgs]

@csells i beg, help!

[osaxma]

As @csells mentioned for the key.

Though that won't prevent the 'Multiple widgets used the same GlobalKey' error since you can't have two pages with the same key in the stack. You'll need to use 'context.go' instead of 'context.push' to prevent that from happening.

[csells]

Yep. That works too.

[csells]

@renanmgs pretty much any LocalKey-derived object would do the trick, e.g.

  final profileKey = ValueKey('profile-page');

[renanmgs]

Ty! In fact i was putting the Key in the Child Widget and not in the MaterialPage.

My workflow no runs with perfection! Many ty!

[iska9der]

Hello! Can you, please, share your example with goRouter&BottomNavigationBar?

[renanmgs]

Hi, sure!
I declared a custom key:
LocalKey homekey = const ValueKey("homepagekey");
And then i just used it on the pages that shared the same BottomNavigationBar:

GoRoute(
        name: "home",
        path: "/",
        pageBuilder: (context, state) {
          return MaterialPage(
            key: homekey,
            child: HomeScreen(index: 0),
          );
        },
    ),

The index parameter that i pass is the index of the BottomNavigationBar, in the Body of my scaffold i use it to show only the widget in my list of widgets!