React项目中如何在指定页面隐藏Header与Footer？

方案一：拆分路由布局（推荐） #

这种方式通过路由嵌套分离不同布局，代码结构清晰、维护性强，是React Router官方推荐的布局管理方式。

1. 创建两个布局组件
   将原App组件拆分为两种布局，分别对应带导航栏/页脚和不带导航栏/页脚的场景：

// MainLayout.jsx - 带Navbar和Footer的常规布局
function MainLayout() {
  return (
    <>
      <Navbar />
      <main>
        <Outlet />
      </main>
      <Footer />
      <ToastContainer />
    </>
  );
}

// BlankLayout.jsx - 不带导航栏的空白布局
function BlankLayout() {
  return (
    <>
      <main>
        <Outlet />
      </main>
      <ToastContainer />
    </>
  );
}

2. 重构路由配置
   将需要显示Navbar/Footer的页面归到MainLayout下，仪表盘这类特殊页面归到BlankLayout下：

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path='/'>
      {/* 带Navbar和Footer的页面组 */}
      <Route element={<MainLayout />}>
        <Route index element={<Home />} />
        <Route path='/register' element={<Register />} />
        <Route path='/login' element={<Login />} />
        <Route path='/logcheck' element={<EnterEmail />} />
        <Route path='/precheck' element={<Precheck />} />
        <Route path='/plans' element={<PlansPage />} />
      </Route>

      {/* 不带Navbar和Footer的私有页面组 */}
      <Route element={<PrivateRoute />}>
        <Route element={<BlankLayout />}>
          <Route path='/dashboard' element={<CustomerDash />} />
          {/* 后续新增的管理员仪表盘也可直接添加在此 */}
          <Route path='/admin-dashboard' element={<AdminDash />} />
        </Route>
      </Route>
    </Route>
  )
);

方案二：在原组件中动态判断路径（适合简单场景） #

如果不想拆分布局组件，可通过React Router的路由钩子判断当前路径，动态控制Navbar和Footer的渲染：

import { useMatch } from 'react-router-dom';

function App() {
  // 匹配所有需要隐藏导航栏的路径，支持通配符（如/admin/*）
  const hideLayout = useMatch('/dashboard') || useMatch('/admin-dashboard');

  return (
    <>
      {!hideLayout && <Navbar />}
      <main>
        <Outlet />
      </main>
      {!hideLayout && <Footer />}
      <ToastContainer />
    </>
  );
}

这种方式适合页面数量较少的场景，但新增特殊页面时需要不断更新判断条件，长期维护成本较高。

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