使用useLocation实现隐藏导航栏功能不生效，求排查问题原因

API 探路者

2026-10-21

代码问题及修正方案

存在的问题

useLocation是React Router提供的Hook函数，不是组件，你将其作为<useLocation>标签使用属于基础用法错误。且Hook必须在被Router上下文包裹的组件内部调用，你当前将相关逻辑写在<Router>标签外部，根本无法获取路由上下文，必然触发运行异常。
代码中使用了WhitePaper组件，但没有对应的导入语句，运行时会报变量未定义错误。
如果你使用的是当前主流的React Router v6版本，原有写法存在两个不兼容问题：Route的component属性已废弃，需改用element属性；所有Route必须包裹在Routes组件内才能正常匹配路由。
你想要实现的「根路径不显示Navbar、其他路径显示Navbar」的逻辑完全没有和路由上下文关联，不可能达到预期效果。

修正后的代码示例

import React from 'react'
import Navbar from './Components/Navbar'
import {BrowserRouter as Router, Routes, Route, useLocation} from 'react-router-dom';
import Home from './Components/Home'
import Welcome from './Components/Welcome'
import About from './Components/About'
import Contact from './Components/Contact'
// 补全WhitePaper组件的导入，路径根据你实际文件位置修改
import WhitePaper from './Components/WhitePaper'

// 单独拆分页面布局逻辑，保证useLocation在Router内部调用
function Layout() {
  const location = useLocation();
  return (
    <>
      {/* 非根路径显示Navbar */}
      {location.pathname !== "/" && <Navbar />}
      <Routes>
        <Route exact path="/" element={<Welcome />}/>
        <Route path="/Home" element={<Home />}/>
        <Route path="/About" element={<About />}/>
        <Route path='/Whitepaper' element={<WhitePaper />}/>
      </Routes>
    </>
  )
}

function App() {
  return (
    <Router>
      <Layout />
    </Router>
  );
}

export default App;