转换后将React Router滚动页移至顶部

React Router 是一个用于构建单页应用程序的库，它可以帮助开发者管理应用程序的路由和导航。在React应用程序中，当用户切换到不同的页面或者执行导航操作时，React Router可以自动帮助我们切换到相应的组件，从而实现页面的无刷新切换。

在React Router中，当我们进行路由切换时，有时候我们希望新页面加载后能够自动滚动到页面顶部，以提供更好的用户体验。要实现这一功能，我们可以使用react-router-scroll-top这个库，它可以帮助我们在路由切换时自动滚动页面到顶部。

使用 react-router-scroll-top，我们可以按照以下步骤进行操作：

1. 首先，确保你的React应用中已经安装了React Router和react-router-scroll-top库。
2. 在你的应用程序根组件中，引入react-router-scroll-top库的ScrollToTop组件。
3. 将ScrollToTop组件包裹在React Router的BrowserRouter或HashRouter组件之内。
4. 使用React Router的Switch组件来定义你的路由规则和对应的组件。
5. 在路由切换时，ScrollToTop组件会自动将页面滚动到顶部。

以下是一个示例代码：

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import { ScrollToTop } from 'react-router-scroll-top';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

const App = () => {
  return (
    <Router>
      <ScrollToTop>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </ScrollToTop>
    </Router>
  );
}

export default App;

上述代码中，我们通过import { ScrollToTop } from 'react-router-scroll-top';导入了ScrollToTop组件，并将其包裹在<Router>组件内。然后，我们使用<Switch>组件定义了三个路由规则，并分别对应了Home、About和Contact三个组件。当用户进行路由切换时，ScrollToTop组件会将页面滚动到顶部。

除了react-router-scroll-top库之外，还有其他方法可以实现页面切换时滚动到顶部的功能。例如，我们可以在每个页面组件的componentDidMount生命周期方法中，使用window.scrollTo方法将页面滚动到顶部。这种方法相对简单，但需要在每个组件中单独添加代码。

总之，通过使用react-router-scroll-top库或其他方法，我们可以实现React Router页面切换时自动滚动到顶部的功能，提升用户体验。