React Router如何根据当前路由控制Navbar/Footer组件渲染

你使用的是React Router v6版本，有两种可落地的实现方式，第一种改动最小适配你当前的代码结构，第二种更适合长期项目维护。

方案1：最小改动实现（适配现有代码） #

核心逻辑是用useLocation钩子获取当前访问路径，判断如果是登录/注册页就不渲染Navbar和Footer。

注意：useLocation必须在BrowserRouter包裹的子组件内调用，不能直接在挂载BrowserRouter的组件中使用，所以需要把路由相关逻辑抽成独立子组件。

完整修改后的代码如下：

import "./App.css";
import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
import Home from "./pages/Home/Home";
import About from "./pages/About/About";
import Navbar from "./components/Navbar";
import Footer from "./components/Footer";
import Login from "./pages/Login/Login";
import Register from "./pages/Register/Register";

// 路由内容组件，处于Router上下文内可正常调用路由钩子
function AppContent() {
  const { pathname } = useLocation();
  // 所有不需要显示公共头尾的路径统一存在这个数组里，后续新增直接加就行
  const hideHeaderFooterPaths = ["/login", "/register"];
  const shouldHideLayout = hideHeaderFooterPaths.includes(pathname);

  return (
    <>
      {!shouldHideLayout && <Navbar />}
      <div className="container">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/login" element={<Login />} />
          <Route path="/register" element={<Register />} />
        </Routes>
      </div>
      {!shouldHideLayout && <Footer />}
    </>
  );
}

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <AppContent />
      </BrowserRouter>
    </div>
  );
}

export default App;

方案2：布局路由实现（推荐长期维护用） #

如果后续会新增更多不需要公共头尾的页面（比如找回密码页、用户协议页），用React Router v6的嵌套路由+布局组件的方式更易维护，不需要每次新增页面都改判断数组。

• 第一步：先写公共布局组件，把Navbar、Footer和公共容器放进去，用Outlet渲染子路由内容：

// src/components/PublicLayout.jsx
import { Outlet } from "react-router-dom";
import Navbar from "./Navbar";
import Footer from "./Footer";

export default function PublicLayout() {
  return (
    <>
      <Navbar />
      <div className="container">
        <Outlet />
      </div>
      <Footer />
    </>
  )
}

• 第二步：修改App里的路由配置，需要显示公共头尾的页面嵌套在PublicLayout路由下，不需要的单独配置：

import "./App.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home/Home";
import About from "./pages/About/About";
import Login from "./pages/Login/Login";
import Register from "./pages/Register/Register";
import PublicLayout from "./components/PublicLayout";

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          {/* 走公共布局、显示头尾的页面 */}
          <Route element={<PublicLayout />}>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
          </Route>
          {/* 不走公共布局、隐藏头尾的页面 */}
          <Route path="/login" element={<Login />} />
          <Route path="/register" element={<Register />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者Nícolas