React Link组件嵌套按钮首次点击生效 后续跳转不刷新页面

问题根因 #

• 可点击元素嵌套不符合规范：<button>嵌套在<Link>组件内属于HTML语义错误，两个可交互元素的事件冒泡逻辑会产生冲突，会干扰Link组件的跳转触发判定。
• React Router 客户端路由默认特性：当你当前已经处于/dashboard路由下时，点击指向同一路由的Link默认不会触发路由组件重渲染，也不会执行重载，这是框架为了减少不必要渲染做的性能优化设计。

解决方案 #

方案1（更推荐）：移除Link嵌套，跳转逻辑合并到点击事件中 #

使用React Router提供的useNavigate钩子手动控制跳转，可自定义同路由下的刷新逻辑：

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

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

  return (
    <button 
      type="button" 
      className="pPlus" 
      onClick={() => {
        saveFunction(state);
        // 方式A：仅触发路由重渲染，不重载整个页面，性能更好
        // 传入唯一state参数，让Dashboard组件可感知到更新
        navigate('/dashboard', { state: { refreshTimestamp: Date.now() } });

        // 方式B：如果需要完全重载页面（等价于手动刷新），替换上面的navigate为下面的代码
        // window.location.href = '/dashboard';
      }}
    >
      Purchase Offset Credits
    </button>
  )
}

如果选择方式A，可在Dashboard组件内通过useLocation监听state变化，执行你需要的刷新逻辑：

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

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

  useEffect(() => {
    // 每次跳转传入的refreshTimestamp变化时，执行数据刷新逻辑
    if (location.state?.refreshTimestamp) {
      // 这里写你的页面数据重新请求逻辑
    }
  }, [location.state])
}

方案2：保留Link写法，加唯一key强制触发跳转 #

如果不想调整现有嵌套结构，可以给Link组件绑定动态唯一key，每次state变化时更新key，强制Link组件重新渲染触发跳转：

<Link to="/dashboard" key={`dashboard-link-${Date.now()}`}>
  <button type="button" className="pPlus" onClick={() => saveFunction(state)}>Purchase Offset Credits</button>
</Link>

注意该方案只是临时解决办法，可交互元素嵌套的语义问题仍然存在，优先选择方案1。

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