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

user_16849454 0
Viewed 748

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> component. This is My 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;
react-router-dom reactjs javascript
2 Answers

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 components in <Router> Provider.

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

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;

user_82767650

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 component up the tree and wrap the App component 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 './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;

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

    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;
};
user_86908570
Related