如何在Reactjs中路由更改而不滚动的情况下将页面置于顶部

在Reactjs中，要实现在路由更改时将页面置于顶部而不滚动，可以使用React Router库提供的ScrollToTop组件。

首先，安装React Router库：

npm install react-router-dom

然后，创建一个名为ScrollToTop.js的新文件，并在其中编写以下代码：

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

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

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

  return null;
};

export default ScrollToTop;

接下来，在你的应用程序的根组件中，将ScrollToTop组件包裹在Router组件中：

import { BrowserRouter as Router, Route } from 'react-router-dom';
import ScrollToTop from './ScrollToTop';

const App = () => {
  return (
    <Router>
      <ScrollToTop />
      {/* 其他路由和组件 */}
    </Router>
  );
};

export default App;

现在，当路由更改时，ScrollToTop组件会自动将页面滚动到顶部，而不会发生滚动。

这种方法适用于React Router v5及以上版本。如果你使用的是较旧的版本，请查阅相应文档以获取正确的实现方式。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云轻量应用服务器（Lighthouse）。

腾讯云云服务器（CVM）产品介绍链接地址：https://cloud.tencent.com/product/cvm

腾讯云轻量应用服务器（Lighthouse）产品介绍链接地址：https://cloud.tencent.com/product/lighthouse