Bellow are my imports:

import React, { useState } from "react";
import { HashRouter as Router, Routes, Route, Link, useLocation} from "react-router-dom";
import './App.css';
import Home from "./ponents/Home";
import About from './ponents/About';
import Works from "./ponents/Works";
import Contact from "./ponents/Contact";

And bellow is the App ponent:

function App() {
  window.document.body.style.background = "url('images/bg-image-3.png') no-repeat center center fixed";
  window.document.body.style.backgroundSize = "cover";

  const location = useLocation();

  return (
    <Router>
      <div className="App">
        <Routes location={location} key={location.pathname}>
          <Route path='/' element={ <Home/> }/>
          <Route path='/about' element={ <About/> }/>
          <Route path='/works' element={ <Works/> }/>
          <Route path='/contact' element={ <Contact/> }/>
        </Routes>
      </div>
    </Router>
  );
}

Now when I run the code my app is totally broken and I'm hit with the following error:

Uncaught Error: useLocation() may be used only in the context of a <Router> ponent.

The issue persist even when I remove the const location = useLocation() declaration and use useLocation() directly to send props to <Routes> as given bellow:

return (
    <Router>
      <div className="App">
        <Routes location={useLocation()} key={useLocation().pathname}>
          <Route path='/' element={ <Home/> }/>
          <Route path='/about' element={ <About/> }/>
          <Route path='/works' element={ <Works/> }/>
          <Route path='/contact' element={ <Contact/> }/>
        </Routes>
      </div>
    </Router>
  );

Can someone please give me some hint as to what I should be doing differently?

Bellow are my imports:

import React, { useState } from "react";
import { HashRouter as Router, Routes, Route, Link, useLocation} from "react-router-dom";
import './App.css';
import Home from "./ponents/Home";
import About from './ponents/About';
import Works from "./ponents/Works";
import Contact from "./ponents/Contact";

And bellow is the App ponent:

function App() {
  window.document.body.style.background = "url('images/bg-image-3.png') no-repeat center center fixed";
  window.document.body.style.backgroundSize = "cover";

  const location = useLocation();

  return (
    <Router>
      <div className="App">
        <Routes location={location} key={location.pathname}>
          <Route path='/' element={ <Home/> }/>
          <Route path='/about' element={ <About/> }/>
          <Route path='/works' element={ <Works/> }/>
          <Route path='/contact' element={ <Contact/> }/>
        </Routes>
      </div>
    </Router>
  );
}

Now when I run the code my app is totally broken and I'm hit with the following error:

Uncaught Error: useLocation() may be used only in the context of a <Router> ponent.

The issue persist even when I remove the const location = useLocation() declaration and use useLocation() directly to send props to <Routes> as given bellow:

return (
    <Router>
      <div className="App">
        <Routes location={useLocation()} key={useLocation().pathname}>
          <Route path='/' element={ <Home/> }/>
          <Route path='/about' element={ <About/> }/>
          <Route path='/works' element={ <Works/> }/>
          <Route path='/contact' element={ <Contact/> }/>
        </Routes>
      </div>
    </Router>
  );

Can someone please give me some hint as to what I should be doing differently?

• javascript
• reactjs
• react-hooks
• react-router-dom

• Can you replace the import Statement with this one and see if it helps import { Router, Routes, Route, Link, useLocation} from "react-router-dom"; – Dazly Gonsalves Commented May 27, 2022 at 8:08

1 Answer 1

Issue

The App ponent is rendering the Router that is providing the routing context, so App itself can't use the useLocation hook since it's outside the router.

Solution

I am assuming that Router is really one of the higher-level routers (BrowserRouter, MemoryRouter, etc). Move the Router higher in the ReactTree than the App ponent in order to provide a routing context to App and allow proper useLocation hook usage.

Example:

<Router>
  <App />
</Router>

App

function App() {
  window.document.body.style.background = "url('images/bg-image-3.png') no-repeat center center fixed";
  window.document.body.style.backgroundSize = "cover";

  const location = useLocation();

  return (
    <div className="App">
      <Routes location={location} key={location.pathname}>
        <Route path='/' element={<Home/>} />
        <Route path='/about' element={<About/>} />
        <Route path='/works' element={<Works/>} />
        <Route path='/contact' element={<Contact/>} />
      </Routes>
    </div>
  );
}