React-Router-DOM v6.19.0特定路由不渲染Header/Footer的实现方法

方法一：拆分路由结构（推荐） #

React Router v6中，布局路由（Root）应该只包裹需要该布局的页面。把不需要Header/Footer的路由（如/login、/signup）和Root路由设为同级，这样它们就不会继承Root的布局。

修改Main.jsx的路由配置：

const router = createBrowserRouter(
  createRoutesFromElements(
    <>
      {/* 无Header/Footer的独立路由 */}
      <Route path="/login" element={<Login />} />
      <Route path="/signup" element={<Signup />} />
      
      {/* 带Header/Footer的布局路由 */}
      <Route path="/" element={<Root />}>
        <Route index element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="pinboard" element={<Todos />} />
        <Route path="lists" element={<Lists />} />
      </Route>
    </>
  )
);

Root.jsx保持原有写法即可，无需额外判断：

function Root() {
  return (
    <>
      <Header />
      <Outlet />
      <Footer />
    </>
  );
}

export default Root;

方法二：在Root组件内判断路径（不推荐） #

如果必须将/login、/signup作为Root的子路由，修正路径判断逻辑并修复笔误（你之前把Footer写成了Header）：

修改Root.jsx：

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

function Root() {
  const location = useLocation();
  // 定义不需要渲染Header/Footer的路径
  const excludePaths = ['/login', '/signup'];
  const shouldRenderLayout = !excludePaths.includes(location.pathname);

  return (
    <>
      {shouldRenderLayout && <Header />}
      <Outlet />
      {shouldRenderLayout && <Footer />} {/* 修复笔误：将Header改为Footer */}
    </>
  );
}

export default Root;

同时要确保/login、/signup已添加到Root的子路由中：

<Route path="/" element={<Root />}>
  <Route index element={<Home />} />
  <Route path="about" element={<About />} />
  <Route path="pinboard" element={<Todos />} />
  <Route path="lists" element={<Lists />} />
  <Route path="login" element={<Login />} />
  <Route path="signup" element={<Signup />} />
</Route>

注意事项 #

• 方法一更符合React Router的设计原则，逻辑清晰且无需额外的路径判断，避免路径匹配错误。
• 若使用方法二，需确保location.pathname与定义的路径完全一致（比如不要出现/login/末尾带斜杠的情况，可使用location.pathname.replace(/\/$/, '')处理）。

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