reactjs - 带有反应路由器的新页面的位置

Question

使用react-router-dom5.2 - 当我向下滚动页面然后转到新页面时，它仍会向下滚动。如何从顶部显示它？谢谢

标签： reactjs

Answer 1

您可以定义一个在路径更改时滚动到顶部的组件。

import React from "react";
import { useLocation } from "react-router-dom";

export default function ScrollToTop() {
  const { pathname } = useLocation();

  React.useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

注意：确保将组件放在RouterApp 文件中。

<Router>
   <ScrollToTop />
   // other routes
</Router>