为什么要从屏幕底部响应新页面渲染？

Question

我的反应项目中有多个页面，每当我从一个页面切换到另一个页面时，页面位置从底部开始，但是，我想在渲染页面后保持在顶部。我目前正在使用路由器 v5，但找不到适用于路由器 v5 的任何解决方案。

我也尝试了另一个版本的解决方案，但是它没有用，你能帮我解决这个问题吗？

这些是我迄今为止尝试过的一些示例，但没有一个成功。

<Router onUpdate={() => window.scrollTo(0, 0)} history={createBrowserHistory()}>
  ...
</Router>

function handleUpdate() {
  let {
    action
  } = this.state.location;

  if (action === 'PUSH') {
    window.scrollTo(0, 0);
  }
}

...

<Router
  onUpdate={handleUpdate}
/>

Answer 1

这是我用来解决这个问题的解决方案。创建一个新组件：

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

const ScrollToTop = ({ children }) => {
  const { pathname } = useLocation();

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

  return children || null;
};

export default ScrollToTop;

并将您的应用程序内容包装在浏览器路由器的内部

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import ScrollToTop from './components/scroll-to-top/scroll-to-top';

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <ScrollToTop>
          <div />
        </ScrollToTop>
      </BrowserRouter>
    </div>
  );
}

export default App;