Next.js客户端组件中useRouter().back()触发NotFoundError的解决咨询

错误成因 #

• 原生事件绑定脱离React上下文：你通过document.getElementById获取DOM元素绑定点击事件，这种方式跳过了React的事件系统。当组件重新渲染或卸载时，可能出现事件处理函数引用不匹配，导致移除事件失败。如果组件卸载后触发点击，back()方法会在路由上下文已不存在的情况下被调用，从而抛出NotFoundError。
• 历史栈边界判断不充分：仅通过pathname !== "/"判断是否可返回并不严谨——比如用户直接访问某个子页面时，浏览器历史栈中只有当前页，此时调用back()会尝试导航到不存在的历史记录，触发错误。

解决方案 #

1. 替换原生事件绑定为React内置事件处理 #

React推荐使用组件属性绑定事件，确保事件始终在组件上下文内执行，避免DOM操作带来的上下文丢失问题。

2. 补充历史栈存在性判断 #

结合window.history.length检查浏览器历史栈中是否有可返回的页面，避免无意义的back()调用。

修改后的代码如下：

"use client";

import React from 'react';
import { usePathname, useRouter } from 'next/navigation';

const CustomBackButton: React.FunctionComponent = () => {
  const { back } = useRouter();
  const pathname = usePathname();

  const onBackClick = () => {
    // 双重判断：当前路径不是首页，且历史栈存在可返回的页面
    if (pathname !== "/" && window.history.length > 1) {
      back();
    }
  };

  return <button onClick={onBackClick}>Go Back</button>;
};

export default CustomBackButton;

额外说明 #

如果你的场景中存在特殊路由逻辑（比如模态框路由、嵌套路由），可以进一步结合Next.js的useSearchParams或路由状态来优化判断逻辑，确保back()调用的安全性。

内容的提问来源于stack exchange，提问作者Yuda Adi Pratama