加载ProtectedRoutes时隐藏Header和Footer，仅显示Loader组件

你的问题根源在于<Header />和<Footer />在App组件的Router根节点下全局渲染，无论ProtectedRoutes处于加载状态还是已验证状态，它们都会被显示。下面提供两种可行的解决方案：

方案一：使用布局组件分离Header/Footer与路由内容 #

核心思路是把Header和Footer封装到专门的布局组件中，仅在路由确认无需加载时才渲染该布局。当ProtectedRoutes处于加载状态时，直接返回<Loader />，跳过布局组件的渲染，从而避免显示Header和Footer。

1. 创建MainLayout布局组件 #

const MainLayout = () => {
  return (
    <>
      <Header />
      <Outlet /> {/* 渲染嵌套的子路由内容 */}
      <Footer />
    </>
  );
};

2. 修改App组件的路由结构 #

将需要显示Header/Footer的页面（包括公共页面和已验证的受保护页面）嵌套到MainLayout中，而登录、注册这类不需要Header/Footer的页面单独放在布局外：

const App = () => {
  return (
    <Router>
      <ScrollToTop />
      <Routes>
        {/* 所有需要Header/Footer的页面 */}
        <Route element={<MainLayout />}>
          {/* 公共页面 */}
          <Route path="/" element={<Home />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="/pricing" element={<Price />} />

          {/* 受保护页面：仅当用户验证通过后才渲染布局 */}
          <Route element={<ProtectedRoutes />}>
            <Route path="/account" element={<Account />} />
            <Route path="/verify-email" element={<EmailVerification />} />
            <Route path="/user-files" element={<FileStorage />} />
          </Route>
        </Route>

        {/* 不需要Header/Footer的公共路由 */}
        <Route element={<PublicRoutes />}>
          <Route path="/registration" element={<Registration />} />
          <Route path="/login" element={<Login />} />
        </Route>
      </Routes>
    </Router>
  );
};

效果说明 #

• 当ProtectedRoutes处于loading状态时，它会直接返回<Loader />，不会触发子路由中的MainLayout渲染，因此Header和Footer不会显示。
• 公共页面（Home、Contact等）和已登录的受保护页面会正常渲染Header和Footer。
• 登录/注册页独立于布局外，不会显示Header/Footer，符合多数场景的需求。

方案二：将Auth状态提升到App组件全局控制 #

如果希望在Auth状态加载期间完全隐藏所有页面内容（包括路由结构），可以把用户状态和加载状态提升到App组件，直接控制全局渲染逻辑。

1. 修改App组件，添加全局Auth状态管理 #

const App = () => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
      setLoading(false);
    });

    return () => unsubscribe();
  }, []);

  // 加载状态下仅显示Loader，不渲染任何其他内容
  if (loading) {
    return <Loader />;
  }

  return (
    <Router>
      <ScrollToTop />
      <Header />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/pricing" element={<Price />} />
        <Route element={<PublicRoutes />}>
          <Route path="/registration" element={<Registration />} />
          <Route path="/login" element={<Login />} />
        </Route>
        {/* 把已获取的user状态传递给ProtectedRoutes */}
        <Route element={<ProtectedRoutes user={user} />}>
          <Route path="/account" element={<Account />} />
          <Route path="/verify-email" element={<EmailVerification />} />
          <Route path="/user-files" element={<FileStorage />} />
        </Route>
      </Routes>
      <Footer />
    </Router>
  );
};

2. 简化ProtectedRoutes组件 #

const ProtectedRoutes = ({ user }) => {
  // 直接使用App传递的user状态，无需自己管理加载逻辑
  return user ? <Outlet /> : <Navigate to="/login" />;
};

效果说明 #

• 此方案在Auth状态加载时，App组件直接返回<Loader />，完全不渲染Header、Footer和路由结构，适合需要全局加载遮罩的场景。
• 优点是逻辑集中，无需修改复杂的路由嵌套结构；缺点是加载状态是全局的，无法针对单个路由做细粒度控制。

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