react router dom v6 的 ScrollToTop 实现

Question

导航到另一个页面时遇到问题，它的 position 将保持与之前的页面相同。 所以它不会自动滚动到顶部。 我目前正在使用“react-router-dom”：“^6.2.1”，

ScrollToTop.js

import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom'; 

const withRouter = (Component) => {
  const Wrapper = (props) => {
    let history = useNavigate();
    return (
      <Component
        history={history}
        {...props}
        />
    );
  };
  
  return Wrapper;
};

function ScrollToTop() {
    let history = useNavigate();
  useEffect(() => {
    const unlisten = history.listen(() => {
      window.scrollTo(0, 0);
    });
    return () => {
      unlisten();
    }
  }, [history]);

  return (null);
}

export default withRouter(ScrollToTop);

App.js我正在返回以下片段

return (
    <>
    <Router>
      <Header/>
      <ScrollToTop />
      {isAuthenticated && <UserOptions user={user}/>}
      <Routes>
        <Route exact path="/" element={<Home /> }/>
        <Route exact path="/product/:id" element={<ProductDetails/>}/>
        <Route exact path="/products" element={<Products/>}/>
        <Route path="/products/:keyword" element={<Products/>}/>
        <Route exact path="/search" element={<Search/>}/>
        <Route exact path="/login" element={<LoginSignUp/>}/>
      </Routes>
      <Footer/>

    </Router>
    </>
  );
}
export default App;

添加 ScrollToTop 组件后，我没有在页面中呈现任何内容。 并且它在控制台上显示“未捕获的 TypeError：history.listen 不是函数”的错误。

我是 MERN 堆栈开发的初学者，所以请指导我哪里错了，以及我的代码库需要改变什么。

我参考了波纹管链接

堆栈溢出：滚动到顶部。

GitHub：在 V6 中弃用了路由器？

Answer 1

[我使用此链接在 react-router-dom v6 中解决了我的 Scroll to top][1]

[1]: https://stackoverflow.com/questions/70193712/how-to-scroll-to-top-on-route-change-with-react-router-dom-v6#:~:text=You%20can %20use%20the%20above,()%3B%20%7D%20%7D%2C%20%5BasPath%5D )%3B