index.tsx:24未明错误: useLocation()只能在<Router>组件的上下文中使用
如果路径名为/admin、/employee、/publisher，则使用位置隐藏导航条。但是我错了说Error: useLocation() may be used only in the context of a <Router> component.这是我的App.js
import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom';
import Navbar from './components/Navbar';
function App() {
const location = useLocation()
return (
<>
<UserState>
<Router>
{!["/admin", "/employee", "/publisher"].includes(location.pathname) && <Navbar/>} //For to hide the navbar if the pathname is /admin, /employee, /publisher
<Routes onUpdate={() => window.scrollTo(0, 0)}>
<Route exact path="/" element={<Home />} />
<Route exact path="/service" element={<Service />} />
<Route exact path="/contact" element={<Contact />} />
<Route exact path="/login" element={<Login />} />
<Route exact path="/reset" element={<Reset />} />
<Route exact path="/reset/:token" element={<Newpassword />} />
<Route path="*" element={<NoteFound/>} />
{/* admin pages */}
<Route path="/admin" element={<Admin />}>
<Route path="add-project" element={<Addproject />} />
<Route path="all-user" element={<AllUser />} />
</Route>
{/* Publisher dasboard */}
<Route path="/publisher" element={<Publisher />}>
<Route path="project-status" element={<ProjectStatus />} />
<Route path="allpublise" element={<Allpublise />} />
</Route>
</Route>
</Routes>
</Router>
</UserState>
</>
);
}
export default App;回答 2
Stack Overflow用户
发布于 2022-04-23 16:39:57
useLocation钩子(和所有其他的react-router-dom钩子)需要在ReactTree中的之上有一个路由器，这样就可以使用路由上下文。
2个备选方案：
- 将
Router组件移动到树上，并包装App组件，以便它可以使用useLocation钩子。
导入{ BrowserRouter作为路由器}从‘反应-路由器-多姆’；
..。
从‘function router’导入Navbar；从‘./components/Navbar’导入Navbar；函数App() { const = useLocation()；返回( {.includes(location.pathname) &}<路由onUpdate={() => window.scrollTo(0 )，( 0)}> <路由path="/“element={} /> <路由path="/service”element={} /> <路由path="/contact“element={} /> <路由path="/login”element={} /> <路由path="/reset“/reset{}<路由”/reset/:令牌“#en23 20#{}<路由**{}{/*管理页*/} <路由path="/admin“element={}> <路由path=”添加-项目“element={} /> <路由path=”所有用户“element={} /> {/* Publisher dasboard */} <路由path="/publisher”element={}> )；}导出默认应用程序；
- 将
useLocation钩子向下移动，以便在Router组件中使用。
从“react路由器-dom”导入{路由、路由、useLocation }；从./components/ Navbar导入Navbar；函数App() {返回(<路由onUpdate={() => window.scrollTo(0 )，( 0)}> <路由path="/“element={} /> <路由path="/service”element={} /> <路由path="/contact“element={} /> {/*管理页*/} <路由path="/admin“element={}> <路由path=”添加-项目“element={} /> <路由path=”所有用户“element={} /> {/* Publisher dasboard */} <路由path="/publisher”element={}> <路由path=“项目-状态”element={} /> <路由path="allpublise“element={} /> )；}导出默认应用程序；
..。
const = () => { const = useLocation()；返回.includes(location.pathname)？/*返回导航条JSX这里*/ : null；};
Stack Overflow用户
发布于 2022-04-23 13:11:37
useLocation()钩子用于从路由器中提取当前位置。为此，需要路由器上下文传递位置内容
因此，如果您想使用这个钩子，您需要在<Router>提供程序中的一个嵌套组件中使用它。
对于您的情况，您需要将钩子移动到navbar组件中。
import { useLocation } from 'react-router-dom';
function Navbar() {
const location = useLocation()
if(["/admin", "/employee", "/publisher"].includes(location.pathname))
return <></>
return (
<>
I'm a navbar
</>
);
}
export default Navbar;
https://stackoverflow.com/questions/71979809
复制相似问题
腾讯云开发者
