Next.js中onClick事件内router.push()导航异常问题求助

下面针对你遇到的onClick里调用router.push()或window.location.href偶尔失效、只刷新当前页的问题，给几个实用的排查和解决方法：

• 阻止按钮默认提交行为
  如果按钮嵌套在<form>标签里，浏览器会默认把它当成提交按钮，点击时触发表单提交导致页面刷新，直接覆盖路由跳转逻辑。两种解决方式：

  1. 给按钮加上type="button"，明确它不是提交按钮：

  <button type="button" className='btn text-center w-75' onClick={() => { router.push('/path') }}>
    <FontAwesomeIcon icon={faTerminal} className='pe-1' /> Base
  </button>
  

  2. 在onClick事件里手动阻止默认行为：

  <button className='btn text-center w-75' onClick={(e) => {
    e.preventDefault();
    router.push('/path');
  }}>
    <FontAwesomeIcon icon={faTerminal} className='pe-1' /> Base
  </button>
  

• 阻断事件冒泡干扰
  如果按钮的父元素也绑定了点击事件，事件冒泡可能会触发父元素的逻辑，打断路由跳转。可以在按钮的onClick里加上e.stopPropagation()：

<button className='btn text-center w-75' onClick={(e) => {
  e.stopPropagation();
  router.push('/path');
}}>
  <FontAwesomeIcon icon={faTerminal} className='pe-1' /> Base
</button>

• 避免状态更新与路由跳转冲突
  如果点击按钮时同时触发了组件状态更新，状态更新引发的组件重渲染可能会干扰路由跳转。可以把路由跳转放在状态更新的回调里，或者用useEffect监听状态变化后再执行跳转：

const [someState, setSomeState] = useState(false);

const handleClick = () => {
  // 状态更新完成后再跳转
  setSomeState(true, () => {
    router.push('/path');
  });
};

• 确认路由实例获取正确
  确保你是通过next/router的useRouter钩子正确获取路由实例，且只在React组件内部使用：

import { useRouter } from 'next/router';

const MyComponent = () => {
  const router = useRouter(); // 必须在组件内部调用
  // ...
};

• 极端情况：强制路由刷新
  如果以上方法都无效，可以尝试带forceRefresh参数的跳转（会触发页面硬刷新，尽量少用）：

router.push('/path', undefined, { forceRefresh: true });

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