如何在React Router的登录、注册页面隐藏导航栏（Navbar）

方法一：通过路径列表直接控制 #

这种方法简单直接，适合路由数量不多的场景：

1. 在App组件中导入useLocation钩子，用来获取当前页面的路径
2. 定义需要隐藏Navbar的路径列表
3. 根据当前路径是否在列表内，决定是否渲染Navbar

修改后的App组件代码：

import { Router, Routes, Route, useLocation } from 'react-router-dom';
import Navbar from './Navbar';
import { publicRoutes } from './your-routes-file-path'; // 替换成你的路由配置文件实际路径

const App = () => {
  const location = useLocation();
  // 列出所有需要隐藏Navbar的页面路径
  const noNavbarPaths = ['/login', '/register', '/forgot'];

  return (
    <Router>
      {/* 只有当前路径不在列表中时，才渲染Navbar */}
      {!noNavbarPaths.includes(location.pathname) && <Navbar />}
      <Routes>
        {publicRoutes.map((route, index) => {
          const Pages = route.component;
          return <Route key={index} path={route.path} element={<Pages />} />;
        })}
      </Routes>
    </Router>
  );
};

export default App;

方法二：给路由配置加标记（更易维护） #

如果后续可能有更多页面需要隐藏Navbar，这种方法扩展性更强：

1. 修改路由配置，给需要隐藏Navbar的路由添加hideNavbar: true标记
2. 在App组件中匹配当前路由，根据标记判断是否渲染Navbar

修改后的路由配置 #

const publicRoutes = [
  { path: "/", component: Home },
  { path: "/login", component: Login, hideNavbar: true },
  { path: "/register", component: Register, hideNavbar: true },
  { path: "/forgot", component: ForgotPassword, hideNavbar: true },
  { path: "/products", component: Products },
  { path: "/products/:id", component: SingleProduct },
  { path: "/help", component: Help },
];

export { publicRoutes };

修改后的App组件代码 #

import { Router, Routes, Route, useLocation, matchPath } from 'react-router-dom';
import Navbar from './Navbar';
import { publicRoutes } from './your-routes-file-path';

const App = () => {
  const location = useLocation();
  // 匹配当前路由，支持动态路由（比如/products/:id）
  const currentRoute = publicRoutes.find(route => 
    matchPath({ path: route.path }, location.pathname)
  );

  return (
    <Router>
      {/* 只有当前路由没有hideNavbar标记时，才渲染Navbar */}
      {!currentRoute?.hideNavbar && <Navbar />}
      <Routes>
        {publicRoutes.map((route, index) => {
          const Pages = route.component;
          return <Route key={index} path={route.path} element={<Pages />} />;
        })}
      </Routes>
    </Router>
  );
};

export default App;

内容的提问来源于stack exchange，提问作者Khuong Viet Tai