Reactjs 隐藏导航栏功能不工作使用位置

有人能告诉我为什么这个函数不能给我期望的结果吗。我错过了什么明显的东西吗？当我打开控制台日志时

import React from 'react'
import Navbar from './Components/Navbar'
import {BrowserRouter as Router, Route} from 'react-router-dom';
import Home from './Components/Home'
import Welcome from './Components/Welcome'
import About from './Components/About'
import Contact from './Components/Contact'


    function App() {
  return (
    <>
    <useLocation> 
      {({ useLocation }) => { 
        if (useLocation.pathname !== "/") { return <Navbar/>; } }
      } 
    </useLocation>
    <Router>
      <Route exact path="/" component={Welcome}/>
      <Route path="/Home" component={Home}/>
      <Route path="/About" component={About}/>
      <Route path='/Whitepaper' component={WhitePaper}/>
    </Router>
    </>
  );
}

export default App;

从“React”导入React
从“./Components/Navbar”导入导航栏
从“react Router dom”导入{BrowserRouter as Router，Route}；
从“./Components/Home”导入主页
从“./Components/Welcome”导入欢迎
从“./Components/About”导入关于
从“./Components/Contact”导入联系人
函数App（）{
返回(
{（{useLocation}）=>{
如果（useLocation.pathname！==“/”{return；}}
} 
);
}
导出默认应用程序；

我认为您将更幸运地将

导航栏

组件渲染到路由中，并从中检查传递的

位置

函数应用程序（）{
返回(
location.pathname！==“/”？：null}
/>
);
}
此代码段中的
useLocation
是什么？这似乎完全不正确。您是否试图使用
React路由器dom
中的
useLocation
React钩子？什么是useLocation？它看起来像一个钩子，但你用它作为组件？React组件必须以大写字母开头。我尝试使用location，但不断出错。我是新手，因此不确定如何纠正这个问题。
function App() {
  return (
    <Router>
      <Route
        render={({ location }) => location.pathname !== "/" ? <Navbar/> : null}
      />
      <Route exact path="/" component={Welcome}/>
      <Route path="/Home" component={Home}/>
      <Route path="/About" component={About}/>
      <Route path='/Whitepaper' component={WhitePaper}/>
    </Router>
  );
}