React跨页面跳转至指定#categories div问题求助

核心原因 #

React单页应用（SPA）采用客户端路由时，直接跳转带锚点的URL，浏览器仅会加载主页面组件，但不会自动触发锚点滚动——要么是组件还未渲染完成，要么是路由切换后浏览器的默认锚点行为未生效。

具体解决方法 #

方法1：React Router v6+ 监听哈希变化手动滚动 #

在主页面组件（如Home.jsx）中监听路由的哈希值变化，组件渲染完成后触发滚动：

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

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

  useEffect(() => {
    if (location.hash) {
      const targetId = location.hash.slice(1);
      const element = document.getElementById(targetId);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
      }
    }
  }, [location.hash]);

  return (
    <div>
      {/* 页面其他内容 */}
      <div id="categories">分类区域内容</div>
    </div>
  );
}

export default Home;

导航链接使用React Router的Link组件保证客户端跳转：

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

// 其他页面的跳转链接
<Link to="/#categories">跳转到分类区</Link>

方法2：手动控制跳转后滚动逻辑 #

如果使用useNavigate进行跳转，可在跳转后手动触发滚动：

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

function OtherPage() {
  const navigate = useNavigate();

  const goToCategories = () => {
    navigate('/');
    // 延迟确保主页面组件渲染完成
    setTimeout(() => {
      const target = document.getElementById('categories');
      target?.scrollIntoView({ behavior: 'smooth' });
    }, 100);
  };

  return <button onClick={goToCategories}>前往分类区</button>;
}

注：可以用React状态判断组件是否加载完成，替代setTimeout避免延迟误差。

方法3：配置React Router滚动恢复 #

React Router v6.4+支持自定义滚动恢复，先在路由配置中开启手动模式：

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  { path: '/', element: <Home /> },
  { path: '/other', element: <OtherPage /> },
], {
  scrollRestoration: 'manual',
});

function App() {
  return <RouterProvider router={router} />;
}

再回到主页面组件，用useEffect监听哈希值执行滚动（同方法1）。

额外排查点 #

• 确认#categories的div存在，id拼写完全匹配（区分大小写）。
• 检查父元素是否设置overflow: hidden，导致无法滚动到目标元素。
• 排查第三方导航组件是否阻止了默认跳转行为。

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