React Router Dom中如何同时实现页面跳转与锚点导航？

核心原因 #

当你在/cart或/login页面点击锚点链接时，浏览器默认只会在当前页面查找匹配id的锚点元素，不会自动先跳转到Main页面（根路径）再定位。直接写/#products在单页路由环境下，也不会触发路由切换后再滚动的逻辑。

具体解决方案 #

方案1：显式指定完整路径+锚点+路由滚动配置 #

把锚点链接改成/#products（如果Main页面是根路径/），同时给单页路由框架添加滚动恢复逻辑，确保路由切换后自动定位到锚点：
以React Router为例，添加自定义滚动组件：

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

function ScrollToAnchor() {
  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]);
  return null;
}

// 在App组件中全局引入
function App() {
  return (
    <>
      <ScrollToAnchor />
      {/* 你的Navbar和路由组件 */}
    </>
  );
}

方案2：手动处理锚点点击事件 #

在Navbar的锚点链接上绑定点击事件，先跳转至Main页面，页面加载完成后再滚动到对应锚点：

// 原生JS实现
function handleAnchorJump(e, anchorId) {
  e.preventDefault();
  // 先跳转到Main页面
  window.location.href = '/';
  // 页面加载完成后执行滚动
  window.addEventListener('load', () => {
    const target = document.getElementById(anchorId);
    if (target) {
      target.scrollIntoView({ behavior: 'smooth' });
    }
  }, { once: true });
}

对应HTML链接写法：

<a href="#products" onclick="handleAnchorJump(event, 'products')">Products</a>

方案3：Vue Router内置锚点处理 #

如果使用Vue Router，直接写to="/#products"，并在路由配置中开启滚动行为：

const router = createRouter({
  history: createWebHistory(),
  routes: [...],
  scrollBehavior(to) {
    if (to.hash) {
      return {
        el: to.hash,
        behavior: 'smooth'
      }
    }
  }
});

关键注意点 #

• 确保Main页面中对应区块的id和锚点名称完全匹配（比如id="products"对应#products）
• 单页应用必须处理路由切换后的滚动逻辑，浏览器默认锚点滚动仅在初始页面加载时生效

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