React返回页面时定位至原点击位置的实现方案问询

问题根源在于全局的scrollToTop会覆盖浏览器默认的历史记录滚动恢复行为，每次跳转都强制滚到顶部，包括返回操作。以下是两种可行的解决方案：

方案一：仅在新跳转时执行scrollToTop #

利用React Router的useNavigationType区分导航类型，只在**新页面推入（PUSH）或替换（REPLACE）**时执行滚动到顶部，返回操作（POP）则保留浏览器默认的位置恢复：

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

// 全局ScrollToTop组件或页面内的useEffect
const ScrollToTop = () => {
  const location = useLocation();
  const navigationType = useNavigationType();

  useEffect(() => {
    // 仅非返回操作时滚动到顶部
    if (navigationType === 'PUSH' || navigationType === 'REPLACE') {
      window.scrollTo({ top: 0, behavior: 'instant' });
    }
  }, [location, navigationType]);

  return null;
};

// 在App.js中挂载该组件
function App() {
  return (
    <BrowserRouter>
      <ScrollToTop />
      {/* 路由配置 */}
    </BrowserRouter>
  );
}

方案二：手动保存并恢复滚动位置 #

如果浏览器默认恢复失效，可手动在跳转前保存当前滚动位置，返回时读取并定位：

1. 在触发跳转的页面保存滚动位置 #

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

const ArticleList = () => {
  const location = useLocation();
  const navigate = useNavigate();

  // 离开页面时保存滚动位置到路由state
  useEffect(() => {
    const saveScrollPos = () => {
      const scrollY = window.scrollY;
      // 替换当前路由state，保存滚动位置
      navigate(location.pathname, {
        state: { ...location.state, scrollY },
        replace: true,
      });
    };

    // 监听页面卸载或路由跳转前事件
    window.addEventListener('beforeunload', saveScrollPos);
    return () => window.removeEventListener('beforeunload', saveScrollPos);
  }, [location, navigate]);

  // 进入页面时恢复滚动位置
  useEffect(() => {
    if (location.state?.scrollY) {
      window.scrollTo(0, location.state.scrollY);
    }
  }, [location]);

  // 组件渲染逻辑...
  return (
    <div>
      {/* 列表项，点击跳转到详情页 */}
    </div>
  );
};

2. 返回按钮保持原有逻辑 #

const PageHeader = () => {
  const navigate = useNavigate();

  const handleGoBack = () => {
    navigate(-1);
  };

  return (
    <header>
      <button onClick={handleGoBack}>返回</button>
    </header>
  );
};

额外注意事项 #

• 检查是否有全局平滑滚动配置（如scroll-behavior: smooth），可能干扰位置恢复，返回时可临时禁用：

  html {
    scroll-behavior: auto; /* 替换smooth，或在返回时动态切换 */
  }
  

• 确保React Router版本为v6+，useNavigationType是v6新增API；若使用v5，可通过history.listen监听action参数（POP/PUSH/REPLACE）。

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