TypeError:无法读取未定义的React Framer Motion API的属性“”location“”

Question

当我尝试使用useLocation()时，我得到这个错误: TypeError: Cannot read property 'location‘of undefined。我该如何解决这个问题呢？

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

访问useEffect()钩子中的'location‘对象并将其设置为状态(使用useState())，然后您将能够访问该对象中的所有属性。

欲了解更多详情，请点击以下链接：https://reactrouter.com/web/api/Hooks/uselocation