如何在React中使用react-router-dom让NotFound页面隐藏Navbar

这里提供两种简单可行的实现方式：

方式一：通过路由路径判断控制Navbar显示 #

利用useLocation钩子获取当前路由路径，仅在指定的有效页面渲染Navbar：

import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom';
import { Home } from '../Pages/Home';
import { Login } from '../Pages/Login';
import { Register } from '../Pages/Register';
import Navbar from './Navbar'; // 确保正确导入Navbar组件

function App() {
  const location = useLocation();
  // 定义需要显示Navbar的路由路径
  const validPaths = ['/home', '/login', '/register'];
  // 仅当当前路径在有效列表中时渲染Navbar
  const showNavbar = validPaths.includes(location.pathname);

  return (
    <Router>
      {showNavbar && <Navbar />}
      <Routes>
        <Route path='/home' element={<Home />} />
        <Route path='/login' element={<Login />} />
        <Route path='/register' element={<Register />} />
        <Route path="*" element={<h1>Page Not Found</h1>} />
      </Routes>
    </Router>
  );
}

export default App;

方式二：使用嵌套路由拆分布局 #

通过嵌套路由将需要Navbar的页面统一放到带布局的父路由下，NotFound页面单独作为顶级路由：

import { BrowserRouter as Router, Routes, Route, Outlet } from 'react-router-dom';
import { Home } from '../Pages/Home';
import { Login } from '../Pages/Login';
import { Register } from '../Pages/Register';
import Navbar from './Navbar';

// 定义包含Navbar的布局组件
function LayoutWithNavbar() {
  return (
    <>
      <Navbar />
      <Outlet /> {/* Outlet用于渲染子路由的页面内容 */}
    </>
  );
}

function App() {
  return (
    <Router>
      <Routes>
        {/* 所有需要Navbar的页面都嵌套在这个父路由下 */}
        <Route element={<LayoutWithNavbar />}>
          <Route path='/home' element={<Home />} />
          <Route path='/login' element={<Login />} />
          <Route path='/register' element={<Register />} />
        </Route>
        {/* NotFound页面无布局包裹，自然不会显示Navbar */}
        <Route path="*" element={<h1>Page Not Found</h1>} />
      </Routes>
    </Router>
  );
}

export default App;

两种方式都能实现需求，方式二更适合后续扩展新页面，推荐使用。

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