如何在React Router v6中仅在指定页面显示导航栏NavBar

完全可以实现仅在指定页面显示导航栏，以下是3种常用的落地方案，可根据项目复杂度选择：

方案1：嵌套路由布局（官方推荐） #

利用React Router v6的嵌套路由能力，把需要显示导航栏的页面统一放在带导航的公共布局组件下，不需要显示的页面单独配置路由，逻辑最清晰。

实现代码 #

import { BrowserRouter, Routes, Route, Outlet } from 'react-router-dom';

// 带导航栏的公共布局组件
const LayoutWithNav = () => {
  return (
    <>
      <Outlet /> {/* 子路由对应的页面组件会渲染到这里 */}
      <Nav />
    </>
  )
}

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        {/* 需要显示导航栏的路由作为嵌套子路由 */}
        <Route element={<LayoutWithNav />}>
          <Route path="/" element={<Main />} />
          <Route path="/detail" element={<Detail />} />
          <Route path="/store" element={<Store />} />
          <Route path="/follow" element={<Follow />} />
          <Route path="/profile" element={<Profile />} />
        </Route>
        {/* 不需要显示导航栏的路由单独配置 */}
        <Route path="/login" element={<Login />} />
      </Routes>
    </BrowserRouter>
  );
};

优势 #

符合React Router官方设计规范，后续新增路由只要放在对应层级即可，维护成本极低，适合中大型项目使用。

方案2：路径匹配判断（适合小型项目） #

不需要修改原有路由结构，直接通过useLocation钩子获取当前路径，匹配不需要显示导航的黑名单路径即可实现隐藏。

实现代码 #

import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom';

const AppContent = () => {
  const location = useLocation();
  // 配置不需要显示导航栏的路径黑名单
  const hideNavPathList = ['/login'];
  return (
    <>
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="/detail" element={<Detail />} />
        <Route path="/store" element={<Store />} />
        <Route path="/follow" element={<Follow />} />
        <Route path="/profile" element={<Profile />} />
        <Route path="/login" element={<Login />} />
      </Routes>
      {/* 仅当前路径不在黑名单中时渲染导航栏 */}
      {!hideNavPathList.includes(location.pathname) && <Nav />}
    </>
  )
}

const Router = () => {
  return (
    <BrowserRouter>
      <AppContent />
    </BrowserRouter>
  );
};

注意事项 #

useLocation必须在BrowserRouter包裹的组件内部使用，所以需要把原有逻辑拆出一层AppContent组件。

优势 #

不需要调整原有路由结构，改造成本极低，适合小型项目或者临时需求使用。

方案3：路由规则匹配（适合带动态参数场景） #

如果需要隐藏导航的路由带动态参数（比如/login/:type），直接匹配路径会失效，可以用useMatch钩子匹配路由规则：

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

const AppContent = () => {
  // 匹配所有/login开头的路由，支持通配符
  const isHideNavPage = useMatch('/login/*');
  return (
    <>
      <Routes>
        {/* 原有路由配置不变 */}
      </Routes>
      {!isHideNavPage && <Nav />}
    </>
  )
}

内容的提问来源于stack exchange，提问作者양성호