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

I am using use location to hide the navbar if the pathname name is /admin, /employee, /publisher. but I got an error saying that Error: useLocation() may be used only in the context of a <Router> ponent. This is My App.js

import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom';
import Navbar from './ponents/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;

I am using use location to hide the navbar if the pathname name is /admin, /employee, /publisher. but I got an error saying that Error: useLocation() may be used only in the context of a <Router> ponent. This is My App.js

import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom';
import Navbar from './ponents/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;

• javascript
• reactjs
• react-router-dom

Share Improve this question Follow edited Apr 23, 2022 at 16:40 Drew Reese 204k1818 gold badges245245 silver badges273273 bronze badges asked Apr 23, 2022 at 12:52 TheDeveloperGuyTheDeveloperGuy 15122 gold badges55 silver badges1515 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

The useLocation hook (and all other react-router-dom hooks) need a router above it in the ReactTree so that a routing context is available.

2 options:

1. Move the Router ponent up the tree and wrap the App ponent so it can use the useLocation hook.

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

   ...

   import { Routes, Route, useLocation } from 'react-router-dom';
   import Navbar from './ponents/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;
   

2. Move the useLocation hook down the tree so that it's used within the Router ponent.

   import { Routes, Route, useLocation } from 'react-router-dom';
   import Navbar from './ponents/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;
   };
   

useLocation() hook is used to extract the current location from the router. For this purpose it's need the router context to pass the Location content

So if you want to use this hook, you need to use it in one of the nested ponents in <Router> Provider.

For your situation, you need to move the hook into the navbar ponent.

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;