Flutter中GoRouter的ShellRoute优化：避免RootPage重复构建

问题核心：切换ShellRoute下的子路由时，ShellRoute的builder方法会重新执行，导致RootPage被整体重建，连带左侧侧边栏也会重复构建。要实现仅右侧主内容区域重载，可通过以下两种方式处理：

方法一：让RootPage保持状态（适配侧边栏带状态的场景） #

将RootPage改为StatefulWidget并混入AutomaticKeepAliveClientMixin，确保页面状态不会因路由切换而销毁：

class RootPage extends StatefulWidget {
  const RootPage({required this.widget, super.key});

  final Widget widget;

  @override
  State<RootPage> createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true; // 开启状态保持

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用super.build
    return Scaffold(
      body: Row(
        children: [
          const Sidebar(), // 侧边栏加const，避免重复创建实例
          Expanded(child: widget),
        ],
      ),
    );
  }
}

方法二：优化ShellRoute的builder逻辑（适配侧边栏无状态的场景） #

如果侧边栏是纯UI无状态组件，可直接在ShellRoute的builder中构建布局，给侧边栏加上const修饰确保复用实例：

ShellRoute(
  navigatorKey: _rootNavigatorKey,
  builder: (_, __, child) => Scaffold(
    body: Row(
      children: [
        const Sidebar(), // const修饰，复用同一实例
        Expanded(child: child),
      ],
    ),
  ),
  routes: <RouteBase>[
    GoRoute(path: ProfilePage.route, builder: (_, __) => const ProfilePage()),
    GoRoute(path: OrganizationPage.route, builder: (_, __) => const OrganizationPage()),
    GoRoute(path: EventsPage.route, builder: (_, __) => const EventsPage()),
  ],
),

补充说明 #

• 若侧边栏包含状态（比如菜单选中高亮），优先选方法一，通过状态保持避免路由切换时丢失状态。
• 给无状态的侧边栏加const修饰是通用优化手段，能减少不必要的Widget实例创建，提升性能。

内容的提问来源于stack exchange，提问作者Jan Hecker