useLocation() 只能在 <Router> 组件的上下文中使用？

Question

我想在组件卸载时有动画。 这是 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;

这是“根路由器”的代码：

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>
    )
}

我尝试在互联网上寻找解决方案，但没有成功。任何帮助表示赞赏。

Answer 1

<BrowserRouter>

需要在组件树中更高，然后调用

useLocation()

。相反，您在 App 中调用 useLocation，并且 App 上方没有

<BrowserRouter>

（只有 App 内部的一个，这没有帮助）。解决方案是将浏览器路由器移至树上或将 useLocation 移至树下。例如：

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

}
``