I have a flutter app that I wanted to add stateful navigation to. I wanted to have it so that you can look at the list of "Foos" and then choose a Foo to look at. On the Foo detail page I wanted to have 3 tabs and have stateful navigation on those three tabs. The urls would look something like this:

我有一个想要添加有状态导航的Ffltter应用程序。我想要它，这样你就可以查看“foo”的列表，然后选择一个foo来查看。在Foo Detail页面上，我希望有3个选项卡，并在这三个选项卡上有状态导航。URL如下所示：

• /foo
  
  
  
  • /:id
    
    
    
    • /pageA
    
    
    • /pageB
    
    
    • /pageC
    
    
    
    
  
  
  
  

I was following this example to incorporate go_router's StatefulShellRoute. The example looked exactly like I wanted, except when I added it to my app with the parameterized route, I get this error:

我按照这个例子合并了GO_RUTER的StatefulShellroute。这个例子看起来和我想要的一模一样，只是当我用参数化路由把它添加到我的应用程序中时，我得到了这个错误：

The default location of a StatefulShellBranch cannot be a parameterized route

The error seems to imply that I can't start the stateful branch on a page that is parameterized, but that's where I want my nested navigation with tabs to start. Is there a way around this or another way to accomplish this?

该错误似乎暗示我不能在参数化的页面上启动有状态分支，但我希望从那里开始我的带有选项卡的嵌套导航。有没有办法绕过这一点，或者有其他方法来实现这一点？

Here's the router I was trying to setup:

这是我试图设置的路由器：

final GoRouter _router = GoRouter(
  navigatorKey: _rootNavigatorKey,
  routes: <RouteBase>[
    GoRoute(
      path: '/',
      builder: (BuildContext context, GoRouterState state) {
        return MyHomePage();
      },
      routes: [
        GoRoute(
            path: 'foo',
            builder: (BuildContext context, GoRouterState state) {
              return const FooListScreen();
            },
            routes: [
              StatefulShellRoute.indexedStack(
                  builder: (context, state, navigationShell) {
                    return Scaffold(body: Center(child: Text("fix this scaffold")));
                  },
                  branches: [
                    StatefulShellBranch(
                        navigatorKey: _fooNavigatorKey,
                        routes: [
                          GoRoute(
                              name: "fooDetails",
                              path: ":id",
                              builder: (context, state) => FooDetailScreen(
                                  id: int.parse(
                                      state.pathParameters['id'] ?? "0"))),
                        ]),
                  ]),
            ]),
      ],
    ),
  ],
);

I'm using Flutter 3.7.11 and go_router 8.0.5

我使用的是Ffltter 3.7.11和Go_Router 8.0.5

one workaround could be to add a dummy route before your parameterized route, see this example:

一种解决方法是在您的参数化路由之前添加一个虚拟路由，请参见以下示例：

final GoRouter _router = GoRouter(
  navigatorKey: _rootNavigatorKey,
  routes: <RouteBase>[
    GoRoute(
      path: '/',
      builder: (BuildContext context, GoRouterState state) {
        return MyHomePage();
      },
      routes: [
        GoRoute(
            path: 'foo',
            builder: (BuildContext context, GoRouterState state) {
              return const FooListScreen();
            },
            routes: [
              StatefulShellRoute.indexedStack(
                  builder: (context, state, navigationShell) {
                    return Scaffold(body: Center(child: Text("fix this scaffold")));
                  },
                  branches: [
                    StatefulShellBranch(
                        navigatorKey: _fooNavigatorKey,
                        routes: [

                          GoRoute(
                              name: "dummyRoute",
                              path: "/dummy",
                              builder: (context, state) => DummyScreen(),
    ),
                          GoRoute(
                              name: "fooDetails",
                              path: ":id",
                              builder: (context, state) => FooDetailScreen(
                                  id: int.parse(
                                      state.pathParameters['id'] ?? "0"))),
                        ]),
                  ]),
            ]),
      ],
    ),
  ],
);

You can audoredirect your route with params:

您可以使用参数audoregreat您的路线：

StatefulShellBranch(
  navigatorKey: shellUniqeKey,
  routes: [
    GoRoute(
      name: "fooDetails",
      path: "/fooDetails",
      redirect: (context, state) =>
          '/fooDetails/${state.pathParameters['id']}',
      routes: [
        GoRoute(
          path: ':id',
          builder: (context, state) => const FooDetailScreen(id: state.pathParameters['id']),
        ),
      ],
    ),
  ],
),