title: How to work with NavigationBar in go_router? | Flutter
body: <p>I am currently struggling refactoring my routing code with <a href="https://pub.dev/packages/go_router" rel="noreferrer">go_router</a>.</p>
  <p>I already got some simple routes like <code>/signin</code> &amp; <code>/signup</code>, but the problem comes in when I try to make the routing work with a BottomNavigationBar that has multiple screens. I would like to have a separate route for each of them like <code>/home</code>, <code>/events</code> &amp; <code>/profile</code>.</p>
  <p>I figured out that I somehow have to return the same widget with a different parameter to prevent the whole screen to change whenever a BottomNavigationBarItem is pressed and instead only update the part above the BottomNavigationBar which would be the screen itself.</p>
  <p>I came up with a pretty tricky solution:</p>
  <pre><code>GoRoute(
    path: '/:path',
    builder: (BuildContext context, GoRouterState state) {
      final String path = state.params['path']!;
  
      if (path == 'signin') {
        return const SignInScreen();
      }
  
      if (path == 'signup') {
        return const SignUpScreen();
      }
  
      if (path == 'forgot-password') {
        return const ForgotPasswordScreen();
      }
  
      // Otherwise it has to be the ScreenWithBottomBar
  
      final int index = getIndexFromPath(path);
  
      if (index != -1) {
        return MainScreen(selectedIndex: index);
      }
  
      return const ErrorScreen();
    }
  )
  </code></pre>
  <p>This does not look very good and it makes it impossible to add subroutes like <code>/profile/settings/appearance</code> or <code>/events/:id</code>.</p>
  <p>I would like to have something easy understandable like this:</p>
  <pre><code>GoRoute(
    path: '/signin',
    builder: (BuildContext context, GoRouterState state) {
      return const SignInScreen();
    }
  ),
  GoRoute(
    path: '/signup',
    builder: (BuildContext context, GoRouterState state) {
      return const SignUpScreen();
    }
  ),
  GoRoute(
    path: '/home',
    builder: (BuildContext context, GoRouterState state) {
      return const ScreenWithNavBar(selectedScreen: 1);
    }
  ),
  GoRoute(
    path: '/events',
    builder: (BuildContext context, GoRouterState state) {
      return const ScreenWithNavBar(selectedScreen: 2);
    },
    routes: &lt;GoRoute&gt;[
      GoRoute(
        path: ':id',
        builder: (BuildContext context, GoRouterState state) {
          return const EventScreen();
        }
      )
    ]
  )
  </code></pre>
  <p>Is there any way to achieve the behavior?</p>