React Router 6环境下如何在Student页面隐藏Navbar组件

针对你的需求，在访问/Student路径时隐藏Header中的Navbar，有两种简单的实现方式：

方法一：在App.js中控制Header的渲染 #

通过useLocation钩子获取当前路由路径，仅在非/Student路径时渲染Header组件：

修改后的App.js代码：

import { Routes, Route, useLocation } from 'react-router-dom';
import Header from './Header';
// 导入其他组件：Home, Login, Dashboard等

function App() {
  const location = useLocation();
  // 判断当前路径是否不是/Student
  const shouldShowHeader = location.pathname !== '/Student';

  return (
    <>
      {shouldShowHeader && <Header />}
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/login' element={<Login />} />
        <Route path='/dashboard' element={
          <PrivateRoute>
            <Dashboard />
          </PrivateRoute>
        } />
        <Route path='/about' element={<About />} />
        <Route path='/contact' element={<Contact />} />
        <Route path='/Signup' element={<Signup />} />
        <Route path='/Student' element={<Student />} />
        <Route path='*' element={<Errror />} />
      </Routes>
    </>
  );
}

export default App;

方法二：在Header组件内部控制Navbar的显示 #

在Header组件中使用useLocation监听路由，当路径为/Student时不渲染Navbar：

修改后的Header.js代码：

import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import {Navbar} from "react-bootstrap";

const Header = () => {
  const location = useLocation();
  // 如果当前是/Student路径，直接返回null不渲染Navbar
  if (location.pathname === '/Student') {
    return null;
  }

  return (
    <>
      <Navbar className="navbar navbar-expand-lg" style={{ background: "rgb(199,240,224)" }}>
        <div className="container-fluid">
          <Link className="navbar-brand" to="#">LOGO</Link>
          <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
          </button>
          <div className="collapse navbar-collapse" id="navbarNav">
            <ul className="navbar-nav">
              <li className="nav-item">
                <Link className="nav-link" to="/login">Login</Link>
              </li>
              <li className="nav-item">
                <Link className="nav-link" to="/Signup">Signup</Link>
              </li>
              <li className="nav-item">
                <Link className="nav-link" to="/contact">Contact</Link>
              </li>
              <li className="nav-item">
                <Link className="nav-link" to="/Dashboard">Student</Link>
              </li>
              <li className="nav-item">
                <Link className="nav-link" to="/Editprofile">EditProfile</Link>
              </li>
            </ul>
          </div>
        </div>
      </Navbar>
    </>
  );
}

export default Header;

注意：代码中把原有的class属性改为了React规范的className，避免JSX语法报错。

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