Next.js报错：Unhandled Runtime Error: Cancel rendering route 原因排查

报错原因 #

你在使用Next.js的<Link>组件时，触发了两个冲突的路由操作：

• <Link href="#" 会触发浏览器默认的锚点跳转（跳转到当前页面顶部）
• onClick里的router.push('/')又要执行跳转到首页的操作
  这两个路由操作同时触发，Next.js会取消其中一个渲染流程，因此抛出Cancel rendering route错误。

另外，<Link>组件的设计初衷是借助Next.js的路由预加载做性能优化，你用它绑定登出逻辑还手动调用router.push，违背了它的使用场景，也是问题的核心诱因。

解决方法 #

以下三种方案任选其一即可：

方案一：阻止Link默认行为 #

修改onClick事件，阻止浏览器默认的锚点跳转，只保留手动路由跳转逻辑：

<Link href="#" onClick={(e) => {
  e.preventDefault();
  logOut();
}} >
   Log out
</Link>

方案二：改用普通按钮组件 #

登出操作不需要路由预加载，直接用普通按钮更合理：

<button onClick={() => logOut()}>
  Log out
</button>

方案三：利用Link自身跳转能力 #

将<Link>的href设为首页地址，onClick仅处理登出的状态更新，无需手动调用router.push：

const logOut = () => {
  dispatch( setUserLogged(userData) )
  // 移除router.push('/')
}

<Link href="/" onClick={() => logOut()}>
  Log out
</Link>

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