React中如何仅在指定页面显示Navbar导航栏

方法一：通过路由路径条件渲染Navbar #

直接在App组件里判断当前路径，只在指定页面渲染Navbar，代码改动最小：

先导入useLocation钩子，获取当前路由路径，定义需要显示Navbar的页面路径列表，最后用条件渲染控制Navbar的显示：

import Navbar from './Navbar';
import BlackWhite from './pages/BlackWhite';
import Home from './pages/Home';
import Color from './pages/Color';
import { Route, Routes, useLocation } from 'react-router-dom';

function App() {
  const location = useLocation();
  // 定义需要显示Navbar的页面路径，比如首页和BlackWhite页面
  const showNavbarPaths = ['/', '/BlackWhite'];

  return (
    <>
      {/* 只有当前路径在列表里时才渲染Navbar */}
      {showNavbarPaths.includes(location.pathname) && <Navbar />}
      <div className="container">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/BlackWhite" element={<BlackWhite />} />
          <Route path="/Color" element={<Color />} />
        </Routes>
      </div>
    </>
  );
}

export default App;

方法二：用嵌套路由做布局分组（更优雅的结构） #

如果后续需要调整的页面较多，建议用布局组件拆分逻辑：

1. 创建带Navbar的布局组件LayoutWithNavbar.jsx：

import Navbar from './Navbar';
import { Outlet } from 'react-router-dom';

export default function LayoutWithNavbar() {
  return (
    <>
      <Navbar />
      <div className="container">
        {/* Outlet会渲染子路由的内容 */}
        <Outlet />
      </div>
    </>
  );
}

2. 修改App.js的路由结构，把需要显示Navbar的页面嵌套在布局路由下：

import LayoutWithNavbar from './LayoutWithNavbar';
import BlackWhite from './pages/BlackWhite';
import Home from './pages/Home';
import Color from './pages/Color';
import { Route, Routes } from 'react-router-dom';

function App() {
  return (
    <Routes>
      {/* 带Navbar的页面都放在这个布局路由下 */}
      <Route element={<LayoutWithNavbar />}>
        <Route path="/" element={<Home />} />
        <Route path="/BlackWhite" element={<BlackWhite />} />
      </Route>
      {/* 不需要Navbar的页面直接单独配置 */}
      <Route path="/Color" element={<Color />} />
    </Routes>
  );
}

export default App;

两种方法都能实现需求，第一种适合快速修改，第二种更利于后续维护扩展。

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