I'm trying to create a different route for mobile and desktop since they have different layouts. The problem is that since they share the same path (see the example code) I couldn't find a way to redirect to the correct parent route depending on the device size, since it always redirects to the route that appears first in the list of routes. I thought there was a way to use NavigatorKey's to redirect correctly, but they don't work either. On the other hand, if having two routes with the same path doesn't throw any exception is it because it has some use case, it doesn't? or am I doing something wrong?

Code example:

GoRouter get data {
    final shellRouteKey = GlobalKey<NavigatorState>();

    return GoRouter(
      navigatorKey: navigatorKey,
      initialLocation: '/home',
      errorBuilder: (context, state) => const NotFoundScreen(),
      routes: [
        ///-----------------------------
        /// MOBILE ROUTES
        ///-----------------------------
        GoRoute(
          path: HomeScreen.path,
          redirect: (context, state) {
            final isExpandedScreen = context.isExpandedScreen;

            final route = state.pathParameters['example'];

            if(route != null) {
              return '/home/$route';
            }
           
           // I want to navigate to Desktop route
            return isExpandedScreen ? '/home/alerts' : null;
          },
          builder: (context, state) {
            return const HomeScreen();
          },
          routes: [
            GoRoute(
              path: ':example',
              builder: (context, state) {
                final route = state.pathParameters["example"];
                return ExamplePage(route: route)
              },
            ),
          ]
        ),


        ///-----------------------------
        /// DESKTOP ROUTES
        ///-----------------------------
        ShellRoute(
          navigatorKey: shellRouteKey,
          builder: (context, state, child) {
            return HomeScreenExpanded(child: child);
          },
          routes: [
            GoRoute(
              path: '${HomeScreen.path}/alerts',
              pageBuilder: (context, state) => const NoTransitionPage(child: AlertsView(isExpandedScreen: true)),
            ),

            GoRoute(
              path: '${HomeScreen.path}/animations',
              pageBuilder: (context, state) => const NoTransitionPage(child: AnimationsView(isExpandedScreen: true)),
            ),

            GoRoute(
              path: '${HomeScreen.path}/avatars',
              pageBuilder: (context, state) => const NoTransitionPage(child: AvatarsView(isExpandedScreen: true)),
            ),

            GoRoute(
              path: '${HomeScreen.path}/cards',
              pageBuilder: (context, state) => const NoTransitionPage(child: CardsView(isExpandedScreen: true)),
            ),

            GoRoute(
              path: '${HomeScreen.path}/checkboxes',
              pageBuilder: (context, state) => const NoTransitionPage(child: CheckboxesView(isExpandedScreen: true)),
            ),

            GoRoute(
              path: '${HomeScreen.path}/inputs',
              pageBuilder: (context, state) => const NoTransitionPage(child: InputsView(isExpandedScreen: true)),
            ),

            GoRoute(
              path: '${HomeScreen.path}/lists',
              pageBuilder: (context, state) => const NoTransitionPage(child: ListsView(isExpandedScreen: true)),
            ),

            GoRoute(
              path: '${HomeScreen.path}/sliders',
              pageBuilder: (context, state) => const NoTransitionPage(child: SlidersView(isExpandedScreen: true)),
            ),
          ]
        ),
      ]
    );

Has anyone tried to do something similar? I would appreciate any help.