React新项目组件加载停留在页面中部的解决方法求助

这个问题在React单页应用里太常见了——因为路由切换只是替换页面上的组件，浏览器并不会重新加载整个页面，所以之前的滚动位置会被保留下来，导致新页面加载后停留在之前的中部位置。下面给你几种靠谱的解决方法，根据你用的React Router版本来选：

方法一：React Router v6 官方解决方案 #

如果你用的是React Router v6，官方已经提供了专门的<ScrollRestoration>组件来处理这个问题，直接用就行：

1. 首先从react-router-dom导入这个组件
2. 在你的根路由组件（比如App.js）里，把它放在<Outlet>的同级位置：

import { ScrollRestoration, Outlet, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <div className="app-container">
      {/* 你的导航栏、全局布局组件 */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/project/:id" element={<ProjectDetail />} />
        {/* 其他路由 */}
      </Routes>
      <ScrollRestoration />
    </div>
  );
}

这个组件会自动监听路由变化，每次切换时把页面滚动到顶部，完全不用自己写额外的逻辑。

方法二：React Router v5 及更早版本 #

如果你的项目还在用v5或者更早的版本，可以通过监听路由变化来手动触发滚动：

函数组件版本 #

用useLocation钩子获取当前路由，再用useEffect监听路由变化：

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

function App() {
  const location = useLocation();

  // 每次路由变化时，滚动到页面顶部
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [location]);

  return (
    <div className="app-container">
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/project/:id" element={<ProjectDetail />} />
      </Routes>
    </div>
  );
}

类组件版本 #

如果你的组件是类组件，可以用withRouter高阶组件注入路由属性，然后在componentDidUpdate里处理：

import React from 'react';
import { withRouter, Route, Switch } from 'react-router-dom';

class App extends React.Component {
  componentDidUpdate(prevProps) {
    // 当路由发生变化时，滚动到顶部
    if (this.props.location !== prevProps.location) {
      window.scrollTo(0, 0);
    }
  }

  render() {
    return (
      <div className="app-container">
        <Switch>
          <Route path="/" component={Home} />
          <Route path="/project/:id" component={ProjectDetail} />
        </Switch>
      </div>
    );
  }
}

// 用withRouter包裹，让组件能拿到location属性
export default withRouter(App);

方法三：手动在链接点击时处理（应急方案） #

如果上面的全局方法暂时没法用，也可以在你的<Project>组件里，给跳转链接加上点击事件，手动滚动到顶部：

假设你的<Project>组件里是用<Link>来跳转的，修改成这样：

import { Link } from 'react-router-dom';

function Project({ thumbnail, title, description, type, path }) {
  return (
    <div className="project-card">
      <Link 
        to={path}
        onClick={() => window.scrollTo(0, 0)} // 点击时滚动到顶部
      >
        <img src={thumbnail} alt={title} />
        <h3>{title}</h3>
        <p>{description}</p>
        <span>{type}</span>
      </Link>
    </div>
  );
}

不过这种方法需要给每个跳转链接都加，不如全局处理优雅，优先推荐前两种方法。

内容的提问来源于stack exchange，提问作者juicy j