Next.js 500 Internal Server Error 在 404 頁面內調用 useEffect Hook 后立即出現錯誤

Question

我正在調用 useEffect 鈎子來調用其中的 setTimeout 函數，以便在 3 秒后使用 Next.js 中的 useRouter 鈎子將用戶重定向回主頁，並在其上調用 push 方法。 當我不在 404 頁面的無狀態功能組件內調用 useEffect 鈎子並將我重定向到自定義 404 頁面時，該頁面工作正常。 但是，每次我調用 useEffect Hook 時，我都會收到 500 個內部服務器錯誤。

錯誤

終端 :next_router__WEBPACK_IMPORTED_MODULE_4___default(...) 不是 PageNotFound (webpack-internal:///./pages/404.js:23:68) at processChild 的函數

import Box from "@material-ui/core/Box";
import Link from "next/link";
import styles from "../styles/Home.module.css";
import useEffect from "react";
import useRouter from "next/router";


const PageNotFound = () => {
  const router = useRouter();

  useEffect(() => {
    setTimeout(() => {
      router.push("/");
    }, 3000);
  }, []);

  return (
    <Box className="page-not-found">
      <h1>Ooops..</h1>
      <h2>That page cannot be found</h2>
      <p>
        Go back to the
        <Link href="/">
          <a className={styles.notFoundHomePageLink}>Homepage.</a>
        </Link>
      </p>
    </Box>
  );
};

export default PageNotFound;

`

Answer 1

似乎您以錯誤的方式導入了useRouter 。 根據文檔，它需要是這樣的：

import { useRouter } from 'next/router';