React Router v6 如何实现Header仅在'/'与'/checkout'路径下可见

你当前代码中将<Header>放在<Routes>外层，会导致所有路由渲染时都加载Header组件，可通过以下两种方案实现需求：

方案1：路径匹配判断（改动最小） #

通过useLocation钩子获取当前路径，匹配指定路径时才渲染Header：

// 完整修改后代码
import React from "react";
import "./App.css";
import Header from "./Header";
import Home from "./Home";
import Checkout from "./Checkout";
import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
import Login from "./Login";

function AppContent() {
  const { pathname } = useLocation();
  const allowedHeaderPaths = ['/', '/checkout'];

  return (
    <div className="app">
      {allowedHeaderPaths.includes(pathname) && <Header />}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/checkout" element={<Checkout />} />
        <Route path="/login" element={<Login />} />
      </Routes>
    </div>
  )
}

function App() {
  return (
    <BrowserRouter>
      <AppContent />
    </BrowserRouter>
  );
}

export default App;

注意：useLocation必须在BrowserRouter包裹的组件内部使用，所以抽离了AppContent层。

方案2：嵌套路由布局（扩展性更强） #

通过布局组件+Outlet子路由出口，按路由分组控制Header显示，适合后续页面扩展：

// 完整修改后代码
import React from "react";
import "./App.css";
import Header from "./Header";
import Home from "./Home";
import Checkout from "./Checkout";
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
import Login from "./Login";

// 带Header的公共布局
function LayoutWithHeader() {
  return (
    <div className="app">
      <Header />
      <Outlet />
    </div>
  )
}

// 不带Header的公共布局
function LayoutWithoutHeader() {
  return (
    <div className="app">
      <Outlet />
    </div>
  )
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* 需要Header的路由归为一组 */}
        <Route element={<LayoutWithHeader />}>
          <Route path="/" element={<Home />} />
          <Route path="/checkout" element={<Checkout />} />
        </Route>
        {/* 不需要Header的路由归为一组 */}
        <Route element={<LayoutWithoutHeader />}>
          <Route path="/login" element={<Login />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

两种方案都可以实现需求：

• 方案1适合页面数量少、路由规则简单的项目，修改成本极低
• 方案2不需要维护路径匹配数组，后续新增路由直接归类到对应布局下即可，更适合中大型项目

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