React项目中锚点跳转时如何给目标组件传递prop参数

问题根因 #

你遇到的报错和锚点跳转本身没有关系，核心是两个错误：

1. mypage.jsx 里的 Product 组件没有传入 workData 属性，组件内部访问未定义的属性自然会抛出异常
2. 同页面锚点跳转属于纯滚动行为，不需要调用 react-router 的路由跳转API，额外的路由跳转反而会触发路由匹配逻辑，配置不当就会出现页面空白的问题，也完全不需要通过路由state传递workData，该参数本身就是父页面mypage.jsx的自有状态，直接传给所有子组件即可。

正确实现步骤 #

1. 修正父页面组件传参 #

先给Product补上workData属性，同时确保mypage.jsx里的workData本身有有效值，请求接口获取的话可以加个加载态，没拿到值前不渲染业务组件避免报错：

// mypage.jsx
<div className="sections">
  <Product workData={workData} />  {/* 补上prop */}
  <Story workData={workData}/>
  <Userflow workData={workData}/>
  <System workData={workData}/>
  <FinalDesign workData={workData}/> 
</div>

2. 调整锚点跳转逻辑 #

直接用原生滚动API实现锚点跳转即可，不需要依赖react-router，还可以自定义滚动动画：

// menu.jsx
import './menu.scss'
export default function MenuWork({menuOpen,setMenuOpen}) {
    // 封装通用锚点跳转方法
    const scrollToAnchor = (anchorId) => {
        setMenuOpen(false)
        const targetElement = document.getElementById(anchorId)
        if(targetElement) {
            // behavior: smooth 是平滑滚动，不需要可以改成auto
            targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' })
        }
    }

    return (
        <div className={"menu " +  (menuOpen && "active")}>
            <ul>
                <li onClick={()=>setMenuOpen(false)}>
                    <a href="/">Back</a>
                </li>
                <li onClick={()=>scrollToAnchor('product')}>
                    <span>Product</span>
                </li>
                <li onClick={()=>scrollToAnchor('story')}>
                    <span>Story</span>
                </li>
                <li onClick={()=>scrollToAnchor('userflow')}>
                    <span>Userflow</span>
                </li>
                {/* 其余锚点同理添加即可 */}
            </ul>
        </div>
    )
}

3. 补齐业务组件的锚点ID #

确保所有需要跳转的业务组件根标签都设置了对应ID，和跳转方法传入的参数保持一致，比如：

• Story组件根标签加id="story"
• Userflow组件根标签加id="userflow"
  以此类推即可。

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