ReactJS页面内锚点跳转报错：无法解析锚点#how-it-works

错误原因 #

你用了React Router的<Link>组件做页面内锚点跳转，但<Link>默认是处理路由路径切换的，它会把#how-it-works当成路由路径的一部分，而非页面内锚点，因此触发路由解析错误，找不到对应锚点的路由配置。

解决方法 #

方法一：用原生<a>标签替代<Link> #

同页面锚点跳转无需借助React Router的<Link>，原生<a>标签就能直接实现，修改代码如下：

<div className='container'>
    <section className="header-banner">
        <a href="#how-it-works" className="btn-dca-form">How it works?</a>
    </section>
    <section id="how-it-works">
       <div className="row">
         <div className="col-12 col-sm order-5" style={{paddingTop: "55px"}}>
              <Fragment>
                   <Mock_Form/>
              </Fragment>
          </div>
       </div>
    </section>
</div>

方法二：用useNavigate钩子手动处理锚点滚动 #

如果需要配合React Router的路由逻辑，可通过useNavigate钩子结合原生DOM滚动实现：

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

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

  const scrollToTarget = () => {
    // 更新URL的hash值
    navigate('#how-it-works');
    // 手动滚动到目标元素
    const target = document.getElementById('how-it-works');
    target?.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <div className='container'>
      <section className="header-banner">
        <button className="btn-dca-form" onClick={scrollToTarget}>How it works?</button>
      </section>
      <section id="how-it-works">
        <div className="row">
          <div className="col-12 col-sm order-5" style={{paddingTop: "55px"}}>
               <Fragment>
                    <Mock_Form/>
               </Fragment>
           </div>
        </div>
      </section>
    </div>
  );
};

export default YourComponent;

额外检查点 #

• 确认目标元素的id拼写完全一致（HTML不区分大小写，但统一拼写能避免潜在问题）；
• 若项目路由配置了basename，需确保锚点跳转的URL包含正确的基础路径，不过这种场景用前两种方法基本能覆盖。

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