React中使用NavLink/Link锚点跳转失效，该如何解决？

核心问题原因 #

React Router 的 Link/NavLink 组件默认不会自动处理哈希锚点的滚动行为，它只会更新 URL 中的哈希值，但不会触发页面滚动到对应元素——这就是你看到 URL 变化但页面没跳转的原因。原生 <a> 标签能正常工作是因为浏览器默认处理了哈希锚点的滚动逻辑，但它会触发页面刷新，不符合 SPA（单页应用）的体验要求。

针对不同场景的解决方案 #

1. 同路由内的锚点跳转 #

方法一：启用 Router 的哈希滚动行为（React Router v6.4+）

直接在 BrowserRouter 上配置 hashScrollBehavior 属性，开启自动滚动：

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

function App() {
  return (
    <BrowserRouter hashScrollBehavior="smooth">
      <Routes>
        {/* 你的路由配置 */}
      </Routes>
    </BrowserRouter>
  );
}

这个配置会让 React Router 自动监听 URL 哈希变化，并滚动到对应 ID 的元素，同时支持平滑滚动效果。

方法二：自定义锚点 Link 组件

如果需要更灵活的控制，可以手动实现点击逻辑：

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

const AnchorLink = ({ to, children, ...props }) => {
  const navigate = useNavigate();

  const handleClick = (e) => {
    e.preventDefault();
    const [path, hash] = to.split('#');
    
    // 先更新路由（如果有路径变化）
    if (path) navigate(path);
    // 滚动到锚点元素
    if (hash) {
      const targetElement = document.getElementById(hash);
      targetElement?.scrollIntoView({ behavior: 'smooth' });
      // 更新URL哈希（即使路径不变）
      window.history.replaceState(null, '', `${path || ''}#${hash}`);
    }
  };

  return (
    <a href={to} onClick={handleClick} {...props}>
      {children}
    </a>
  );
};

使用时直接替换原有的 Link：

<AnchorLink to="#section">跳转到同页锚点</AnchorLink>

2. 跨路由的锚点跳转 #

如果是跳转到其他路由的锚点（比如 to="/about#contact"），需要在目标路由组件中添加滚动逻辑：

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

const AboutPage = () => {
  const location = useLocation();

  useEffect(() => {
    const hash = location.hash.slice(1);
    if (hash) {
      const targetElement = document.getElementById(hash);
      // 确保组件渲染完成后再滚动
      setTimeout(() => {
        targetElement?.scrollIntoView({ behavior: 'smooth' });
      }, 100);
    }
  }, [location.hash]);

  return (
    <div>
      <section id="contact">联系我们锚点</section>
    </div>
  );
};

通过监听 location.hash 的变化，在组件挂载或哈希更新时自动滚动到目标元素。

总结 #

不需要直接退回到原生 <a> 标签——虽然它能工作，但会破坏 SPA 的无刷新体验。通过上述 React Router 专属的配置或自定义组件，既能保持单页应用的特性，又能实现正常的锚点跳转功能。

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