React Router跳转后页面自动滚动到下方位置的异常问题求助

问题原因 #

React Router默认未提供路由切换时的滚动位置重置能力，浏览器会全局保留当前页面的滚动高度，因此路由跳转后新页面会继承上一页的滚动位置。

解决方案 #

根据你使用的React Router版本选择对应方案即可：

方案1：React Router v6（推荐） #

v6已经内置了滚动重置组件，直接在路由根组件中引入使用即可：

// 在App.js/路由入口文件中导入
import { ScrollRestoration } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      {/* 放在Router内部最顶部即可 */}
      <ScrollRestoration />
      <Switch>
        {/* 你原有的路由配置保持不变 */}
        <Route path="/" exact>
          <Redirect to="/home"></Redirect>
        </Route>
        <Route path="/home/:brand/:id">
          <ProductDetail />
        </Route>
        <Route path="/home/:brand">
          <ProductList />
        </Route>
        <Route path="/add-item">
          <AddItem />
        </Route>
        <Route path="/home">
          <Home />
        </Route>
      </Switch>
    </BrowserRouter>
  )
}

方案2：React Router v5及更早版本 #

自己封装滚动重置组件，监听路由路径变化自动滚动到顶部：

1. 新建ScrollToTop.js组件：

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

export default function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    // 路由路径变化时滚动到页面顶部
    window.scrollTo(0, 0);
    // 如果你的滚动区域是自定义容器，替换为下面的代码：
    // document.querySelector('.你的滚动容器类名').scrollTop = 0;
  }, [pathname]);

  return null;
}

2. 在路由入口文件中引入该组件，放在Router内部、Switch上方即可：

import ScrollToTop from './ScrollToTop';

function App() {
  return (
    <BrowserRouter>
      <ScrollToTop />
      {/* 原有Switch路由配置保持不变 */}
      <Switch>
        {/* ...你的原有路由代码 */}
      </Switch>
    </BrowserRouter>
  )
}

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