NextJS 13+中not-found.tsx跳转回上一页失效问题求助

你的代码无效有两个核心原因：

• NextJS 13+ App Router 中，not-found.tsx 默认是服务器组件，而 useRouter 是客户端专属钩子，无法在服务器组件中使用。
• React 组件必须返回 JSX/React 元素，直接执行 router.back() 并返回它不符合组件渲染规则。

以下是修正后的可行方案：

基础版：自动返回上一页 #

将 not-found.tsx 改为客户端组件，并在副作用中执行跳转：

'use client';

import { useRouter } from "next/navigation";
import { useEffect } from "react";

export default function NotFoundPage() {
  const router = useRouter();

  useEffect(() => {
    router.back();
  }, [router]);

  return null; // 不渲染任何页面内容
}

进阶版：处理无历史记录的情况 #

如果用户是直接访问不存在的路由（没有历史记录可返回），可以添加 fallback 逻辑跳转到首页：

'use client';

import { useRouter } from "next/navigation";
import { useEffect } from "react";

export default function NotFoundPage() {
  const router = useRouter();

  useEffect(() => {
    const handleRedirect = () => {
      // 检查是否有可返回的历史记录
      if (window.history.length > 1) {
        router.back();
      } else {
        router.push('/'); // 无历史记录时跳转到首页
      }
    };

    handleRedirect();
  }, [router]);

  return null;
}

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