代码之家 › 专栏 › 技术社区 › Milos Glamocak

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

framer-motion react-router react-hooks reactjs javascript

Milos Glamocak · 技术社区 · 1 年前

我希望在组件卸载时有一个动画。以下是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>
    )
}

我试着在互联网上寻找解决方案,但没有成功。感谢您的帮助。

1 回复 | 直到 1 年前

Nicholas Tower 1 年前

这个 <BrowserRouter> 需要 较高的 在组件树上,然后在您调用的位置 useLocation() 。相反,您在应用程序中调用useLocation,但没有 <浏览器路由器> 上面的应用程序(只是应用程序中的一个,没有帮助)。解决方案是将浏览器路由器向树上移动或向下移动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

}

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

4 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

4 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

5 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

5 月前

Luckkks · 过渡色工作不正常

5 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

5 月前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

5 月前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

5 月前

noblerare · Vite错误-未定义导出(SSR)

5 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

5 月前