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 "./components/Home";
import About from './components/About';
import Works from "./components/Works";
import Contact from "./components/Contact";

And bellow is the App component:

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> component.

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? Thanks in advance.

CodePudding user response：

Issue

The App component 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 component 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>
  );
}