useLocation() may be used only in the context of a <Router> component?

March 3, 2024

I want to have an animation when a component unmounts.
Here’s the code of the app.js:

import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom';
import { AnimatePresence } from 'framer-motion';
function App() {
  const location = useLocation();
  return (
    <BrowserRouter>
      <AnimatePresence mode='wait'>
        <Routes key={location.pathname} location={location}>
          <Route path='/' element={<Portfolio />}>
            <Route index path='home' element={<Home />}/>
            <Route path='projects' element={<Projects />}/>
            <Route path='info' element={<Info />}/>
            <Route path='contact' element={<Contact />}/>
          </Route>
        </Routes>
      </AnimatePresence>
    </BrowserRouter>
  );
}
export default App;

And here is the code of the ‘root router’:

function Portfolio() {
    return (
        <Container className='bg' 
        maxWidth = {false}
        <Container className ='cont'
        maxWidth = {false}
        >
            <h1 className='header'>Milos Glamocak</h1>
            <nav className='navContainer'>
                <ul className='menu'>
                    <li className='menuLine'><Link to ='home' className='link' >Home</Link></li>
                    <li className='menuLine'><Link to ='projects' className='link'>Projects</Link></li>
                   <li className='menuLine'><Link to ='info' className='link'>Info</Link></li>
                    <li className='menuLine'><Link to ='contact' className='link'>Contact</Link></li>
                </ul>
                <Outlet />
            </nav>
        </Container>
...
        </Container>
    )
}

I tried looking for solution on the internet but to no avail. Any help appreciated.

>Solution :

The <BrowserRouter> needs to be higher up the component tree then where you call useLocation(). Instead, you’re calling useLocation in App, and there is no <BrowserRouter> above App (just one inside of App, which does not help). The solution is to move the browser router up the tree or move useLocation down. For example:

function App() {
  return (
    <BrowserRouter>
      <MyRoutes/>
    </BrowserRouter>
  )
}

function MyRoutes(){
  const location = useLocation();
  return (
    <AnimatePresence mode='wait'>
      <Routes key={location.pathname} location={location}>
        <Route path='/' element={<Portfolio />}>
    // ... etc

}