想要在学生页面上隐藏导航栏 [关闭]答案

【问题标题】：Want to hide navbar on student page [closed]想要在学生页面上隐藏导航栏 [关闭]
【发布时间】：2022-10-24 16:13:24
【问题描述】：

//Header.js file
import React from 'react'
//import Nav from 'react-bootstrap/Nav'
import { Link, NavLink } from 'react-router-dom'
import {Navbar} from "react-bootstrap";


const Header = () => {

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


export default Header

我想从学生页面隐藏导航栏。反应版本 - 18.1.0 反应路由器 dom-6.0.2

导航栏文件保存为 Header.js

这是 App.js 代码

<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>

【问题讨论】：

显示的代码中没有任何内容称为“switch”。你的问题不清楚。请详细说明您要问什么。要了解有关此社区的更多信息以及我们如何为您提供帮助，请从 tour 开始并阅读 How to Ask 及其链接资源。
您使用的反应版本是什么？
我正在使用 react 18 版本，我只想从学生页面隐藏导航栏忽略 switch 语句，我尝试但没有得到正确的输出。

标签： reactjs

【解决方案1】：

您可以在 Header 组件中使用 useLocation 以找到当前路径并相应地隐藏 Header

import { useLocation } from 'react-router-dom'

接着

const location = useLocation();
location.pathname.includes('Student') ? HIDE_COMPONENT : SHOW_COMPONENT

【讨论】：

您能否详细说明一下这两条线的确切位置以及显示和隐藏组件中的内容？
请也分享您的标题组件，我会更新我的答案
@ShivangiPandey 有任何更新吗？