TypeError: Cannot read property 'location' of undefined React Framer Motion API

Question

When I'm trying to use useLocation() I get this error: TypeError: Cannot read property 'location' of undefined. How can I fix this?

import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import {useLocation} from 'react-router-dom'
import home from './Components/home'
import about from './Components/about'
import work from './Components/work'
import contact from './Components/contact'
import NavbarHeader from './Components/navbarHeader';
import {AnimatePresence, motion} from 'framer-motion'

function App() {
  const location = useLocation();
  return (
    <Router>
      <AnimatePresence exitBeforeEnter>
      <NavbarHeader/>
        <Switch location= {location} key = {location.pathname}>
          <Route exact path='/' component={home}/>
          <Route path='/about' component={about}/>
          <Route path='/work' component={work}/>
          <Route path='/contact' component={contact}/>
        </Switch>
      </AnimatePresence>
      </Router>
  );
}

export default App;

Answer 1

access the 'location' object in useEffect() hook and set it to state (using useState()) then you will be able to access all the attributes inside that object.

for more details please the the following link: https://reactrouter.com/web/api/Hooks/uselocation