Next.js useRouter().back() 在客户端组件中导致 NotFoundError

Question

我正在开发一个 Next.js 项目，并使用 useRouter() 挂钩在页面之间导航。在我的一个客户端组件中，我尝试使用 useRouter() 中的 back() 方法来在用户单击自定义后退按钮时处理导航。但是，当触发 back() 方法时，我遇到了 NotFoundError。

这是我当前的设置：

"use client";

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

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

  const onBackClick = useCallback(() => {
    if (pathname !== "/") {
      back();
    }
  }, [back, pathname]);

  useEffect(() => {
    document.getElementById("back-btn")?.addEventListener("click", onBackClick);

    return () => {
      document.getElementById("back-btn")?.removeEventListener("click", onBackClick);
    };
  }, [onBackClick]);

  return <button id="back-btn">Go Back</button>;
};

export default CustomBackButton;

我遇到的错误：

未处理的运行时错误

NotFoundError：此处找不到该对象。

什么可能导致此 NotFoundError，以及在使用 useRouter().back() 进行导航时如何解决它？

nextjs 版本：13.2.14

我需要设置手柄回来使用useRouter

Answer 1

在 Next.js 中，

back()

方法会触发浏览器尝试导航到历史堆栈中的上一个条目，但如果没有上一个条目，则可能会出现

NotFoundError

，因为无处可返回。要解决此问题，您可以检查浏览器历史记录条目是否可用，如果不可用，您可以将用户重定向到特殊页面，例如主页。

我更新了您的代码，如下所示。

"use client";

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

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

  const onBackClick = useCallback(() => {
    if (window.history.length > 1 && pathname !== "/") {
      // Use the back() method if history is available
      back();
    } else {
      // Redirect to the "/" page, you can adjust it
      push("/");
    }
  }, [back, push, pathname]);

  useEffect(() => {
    document.getElementById("back-btn")?.addEventListener("click", onBackClick);

    return () => {
      document.getElementById("back-btn")?.removeEventListener("click", onBackClick);
    };
  }, [onBackClick]);

  return <button id="back-btn">Go Back</button>;
};

export default CustomBackButton;