React Router Dom v6：在路由更改时滚动到顶部

Question

我在ReactJ上制作了一个网站，并使用“ React-Router-Dom V6”链接了各个页面。每当我从一个页面过渡到另一页时，第二页总是在当前位置而不是顶部加载。我尝试了许多教程和解决方案，但是它们都有效，直到React-Router-dom的V5。

Answer 1

我通过创建一个包装函数并将其包装在所有路由周围解决了以下问题。

请按照以下步骤操作：

1：您需要导入以下内容：

import {Routes, Route, BrowserRouter as Router, useLocation} from 'react-router-dom';
import {useLayoutEffect} from 'react';

2：在“App”函数上方编写一个包装函数：

const Wrapper = ({children}) => {
  const location = useLocation();
  useLayoutEffect(() => {
    document.documentElement.scrollTo(0, 0);
  }, [location.pathname]);
  return children
} 

3：现在将您的路由包装在包装函数中：

<BrowserRouter>
  <Wrapper>
    <Navbar />
      <Routes>
        <Route exact path="/" element={<Home/>} />
        <Route path="/Products" element={<Products/>} />
        <Route path="/Login" element={<Login/>} />
        <Route path="/Aggressive" element={<Aggressive/>} />
        <Route path="/Attendance" element={<Attendance/>} />
        <Route path="/Choking" element={<Choking/>} />
        <Route path="/EmptyCounter" element={<EmptyCounter/>} />
        <Route path="/FaceMask" element={<FaceMask/>} />
        <Route path="/Fainting" element={<Fainting/>} />
        <Route path="/Smoking" element={<Smoking/>} />
        <Route path="/SocialDistancing" element={<SocialDistancing/>} />
        <Route path="/Weapon" element={<Weapon/>} />
      </Routes>
    <Footer />
  </Wrapper>
</BrowserRouter>

这应该可以解决问题。