React路由跳转商品详情页自动滚动到底部问题求助

常见诱因 #

这种问题通常源于React Router默认的滚动恢复机制，或是页面加载后某个元素自动获取焦点，触发浏览器自动滚动；也可能是异步数据加载完成后页面高度突变引发的滚动偏移。

可行解决方案 #

方案1：页面加载时强制滚动到顶部 #

直接在商品详情页的useEffect中添加滚动逻辑，确保页面渲染完成后回到顶部：
修改ProductDetails组件的useEffect：

useEffect(() => {
  if (error) {
    alert.error(error);
    dispatch(clearErrors());
  }
  if (reviewError) {
    alert.error(reviewError);
    dispatch(clearErrors());
  }
  if (success) {
    alert.success("Review Submitted Successfully");
    dispatch({ type: NEW_REVIEW_RESET });
  }
  dispatch(getProductDetails(match.params.id));
  // 新增：强制滚动到页面顶部
  window.scrollTo(0, 0);
}, [dispatch, match.params.id, error, alert, reviewError, success]);

方案2：使用useRef定位顶部元素实现精准滚动 #

如果window.scrollTo不生效，可通过绑定页面顶部元素实现精准滚动：

1. 在ProductDetails组件中引入并创建ref：

import React, { useEffect, useState, useRef } from "react";

const ProductDetails = ({ match }) => {
  const topRef = useRef(null);
  // ... 其他原有代码

2. 将ref绑定到页面最顶部的容器元素：

<MetaData title={`${product.name} -- ECOMMERCE`} />
<div ref={topRef} className="ProductDetails">
  // ... 组件原有内容
</div>

3. 在useEffect中调用滚动方法：

useEffect(() => {
  // ... 原有逻辑
  dispatch(getProductDetails(match.params.id));
  // 新增：滚动到绑定的顶部元素
  topRef.current?.scrollIntoView({ behavior: 'smooth' });
}, [dispatch, match.params.id, error, alert, reviewError, success]);

方案3：阻止元素自动获取焦点 #

若页面中存在自动聚焦的元素（比如数量输入框），会触发浏览器滚动到该位置，可手动关闭自动聚焦：
修改数量输入框代码：

<input readOnly type="number" value={quantity} autoFocus={false} />

方案4：全局配置路由滚动行为 #

如果多个页面都存在该问题，可在路由根组件中全局设置滚动恢复：

import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom';

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

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

  return null;
}

function App() {
  return (
    <Router>
      <ScrollToTop />
      <Routes>
        // ... 你的路由配置
      </Routes>
    </Router>
  );
}

验证效果 #

修改完成后点击商品卡片跳转，页面应停留在顶部，不会自动滚到底部。若仍有问题，可检查是否存在动态加载的内容（如图片），可在图片加载完成后再执行滚动逻辑。

内容的提问来源于stack exchange，提问作者shoaib ulla khan