index.tsx:24 Uncaught Error: useLocation() may be used only in the context of a <Router> component

Question

如果路径名是 /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;

Answer 1

useLocation() 钩子用于从路由器中提取当前位置。为此，需要路由器上下文来传递位置内容

所以如果你想使用这个钩子，你需要在 <Router> Provider 中的嵌套组件之一中使用它。

对于您的情况，您需要将挂钩移动到导航栏组件中。

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;

Answer 2

useLocation 挂钩（和所有其他 react-router-dom 挂钩）需要 [=40 以上的路由器=] 它在 ReactTree 中以便路由上下文可用。

2 个选项：

将 Router 组件向上移动并包装 App 组件，以便它可以使用 useLocation 挂钩。

import { BrowserRouter as Router } from 'react-router-dom'; ... <Router> <App /> </Router>

...

import { Routes, Route, useLocation } from 'react-router-dom'; import Navbar from './components/Navbar'; function App() { const location = useLocation(); return ( <UserState> {!["/admin", "/employee", "/publisher"].includes(location.pathname) && <Navbar/>} <Routes onUpdate={() => window.scrollTo(0, 0)}> <Route path="/" element={<Home />} /> <Route path="/service" element={<Service />} /> <Route path="/contact" element={<Contact />} /> <Route path="/login" element={<Login />} /> <Route path="/reset" element={<Reset />} /> <Route 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> </Routes> </UserState> ); } export default App;

将 useLocation 挂钩移到树下，以便在 Router 组件中使用它。

import { Routes, Route, useLocation } from 'react-router-dom'; import Navbar from './components/Navbar'; function App() { return ( <UserState> <Router> <Navbar/> <Routes onUpdate={() => window.scrollTo(0, 0)}> <Route path="/" element={<Home />} /> <Route path="/service" element={<Service />} /> <Route path="/contact" element={<Contact />} /> <Route path="/login" element={<Login />} /> <Route path="/reset" element={<Reset />} /> <Route 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> </Routes> </Router> </UserState> ); } export default App;

...

const Navbar = () => { const location = useLocation(); return !["/admin", "/employee", "/publisher"].includes(location.pathname) ? /* Return navbar JSX here */ : null; };

index.tsx:24 Uncaught Error: useLocation() may be used only in the context of a <Router> component

index.tsx:24 Uncaught Error: useLocation() may be used only in the context of a <Router> component

javascript

reactjs

react-router-dom