v6路由跳转时页面滚动位置异常排查分享

最近在项目中将React Router从v5升级到v6，遇到了一个令人头疼的问题：页面跳转时滚动位置异常。这个问题在v5中从未出现过。

问题复现步骤：

在长页面中滚动到中间位置
点击路由链接跳转到另一个页面
返回上一页，发现页面不是停留在之前的滚动位置

排查过程： 最初以为是组件状态管理的问题，检查了useEffect和useState的使用。后来发现v6的useNavigate和useLocation行为确实有变化，特别是与滚动相关的逻辑。

解决方案： 在项目中添加了自定义滚动恢复逻辑：

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

function ScrollToTop() {
  const location = useLocation();
  const navigate = useNavigate();

  useEffect(() => {
    // 保存当前滚动位置
    const saveScrollPosition = () => {
      sessionStorage.setItem('scrollPosition', window.scrollY);
    };

    // 恢复滚动位置
    const restoreScrollPosition = () => {
      const position = sessionStorage.getItem('scrollPosition');
      if (position) {
        window.scrollTo(0, parseInt(position));
      }
    };

    // 监听页面离开事件
    window.addEventListener('beforeunload', saveScrollPosition);
    
    // 页面加载时恢复位置
    restoreScrollPosition();

    return () => {
      window.removeEventListener('beforeunload', saveScrollPosition);
    };
  }, [location.pathname]);

  return null;
}

总结： v6版本的路由行为确实有变化，建议在升级时重点关注滚动位置相关逻辑，必要时需要手动处理。这个问题在实际项目中影响用户体验较大，值得特别关注。