React Router v6中如何避免<Outlet/>周边组件重渲染并实现登录布局隔离

我正在开发一个全权限保护的React应用，仅Login页面无需登录即可访问，且其布局与应用其他页面完全不同。目前我使用<Outlet/>渲染应用布局，但路由切换时Menu和Header组件也会重新渲染，请问有什么解决方案可以阻止这些组件重渲染？

App组件代码：

const App = () => {
    return (
        <Routes>
            <Route path="/" index={true} element={<LoginRoute />} />

            <Route element={<ProtectedRoutes />}>
                <Route path="dashboard" index={true} element={<Dashboard />} />
                <Route path="article" element={<ArticleRoute />} />
                <Route path="article/add" element={<ArticleAddRoute />} />
                <Route path="article/:id" element={<ArticleEditRoute />} />
            </Route>

            <Route path="*" element={<ErrorPage />} />
        </Routes>
    );
};

ProtectedRoutes组件代码：

const ProtectedRoutes = () => {
    const { userData } = useAuth();
    const location = useLocation();

    return userData ? (
        <Container>
            <NavContainer>
                <Menu />
            </NavContainer>
            <Main>
                <Header />
                <div>
                    <Outlet />
                </div>
            </Main>
        </Container>
    ) : (
        <Navigate to="/" state={{ from: location, status: 'unauthorized' }} replace />
    );
};

我是否需要将LoginRoute组件完全移出Routes，根据userData是否存在进行条件显示？或者还有其他解决方案？

方案1：用React.memo包裹Menu和Header组件 #

如果Menu、Header的props没有频繁变化，直接用React.memo包裹组件，就能阻止它们因父组件重渲染而触发的不必要更新：

const Menu = React.memo(() => {
  // 组件原有逻辑
});

const Header = React.memo(() => {
  // 组件原有逻辑
});

注意：如果组件依赖的context值、内部state变化，或者传入的props是引用类型（比如对象、函数），需要配合useCallback、useMemo稳定依赖，否则memo不会生效。

方案2：抽离布局组件，分离路由校验与渲染逻辑 #

把包含Menu、Header的布局部分单独拆成组件，让ProtectedRoutes只负责权限校验，不参与布局渲染：

// 独立的应用布局组件
const AppLayout = () => {
  return (
    <Container>
      <NavContainer>
        <Menu />
      </NavContainer>
      <Main>
        <Header />
        <div>
          <Outlet />
        </div>
      </Main>
    </Container>
  );
};

// 修改后的ProtectedRoutes
const ProtectedRoutes = () => {
  const { userData } = useAuth();
  const location = useLocation();

  // 未登录直接跳转，避免布局组件触发渲染
  if (!userData) {
    return <Navigate to="/" state={{ from: location, status: 'unauthorized' }} replace />;
  }

  // 登录状态稳定后，只渲染一次布局组件
  return <AppLayout />;
};

这种方式下，布局组件只会在userData从无到有时渲染一次，后续路由切换时，只有Outlet内的页面组件更新，Menu和Header不会重渲染。

方案3：不建议将LoginRoute移出Routes #

把LoginRoute从Routes中移出，改用userData条件渲染的方式，会丢失React Router的路由管理能力（比如地址栏同步、路由状态持久化等），反而增加状态维护的复杂度。保持LoginRoute在Routes内是更符合React Router设计的做法。

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