reactjs - React ScrollToTop 组件问题：它应该可以工作，但它没有

Question

我正在编写一个 React 应用程序，我正在尝试使用 ScrollToTop 组件在应用程序中向下滚动。但问题是由于某种原因它根本不起作用。

请帮助我真的很努力解决这个问题......

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

export default () => {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo({ top: 0, left: 0, behavior: "auto" });
  }, [pathname]);

  return null;
}

我在 App.js 中导入了这个组件

import React from 'react'
import { HashRouter } from "react-router-dom";
// import * as serviceWorker from './serviceWorker';


// core styles
import "./scss/volt.scss";

// vendor styles
import "@fortawesome/fontawesome-free/css/all.css";
import "react-datetime/css/react-datetime.css";

import HomePage from "./pages/HomePage";


import ScrollToTop from "./ScrollToTop";

function App() {
    return (
    <HashRouter>
        <ScrollToTop/>
        <HomePage />
    </HashRouter>
    )
}


export default App

有谁能够帮我？

标签： reactjsscroll

Answer 1

请试试这个。

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

export default () => {
  const { pathname } = useLocation();

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

  return null;
}