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?
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.
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>
);
}