Next.js 500 内部服务器错误在 404 页面内调用 useEffect Hook 后立即出现

Posted 2023-02-22

【中文标题】Next.js 500 内部服务器错误在 404 页面内调用 useEffect Hook 后立即出现

【英文标题】：Next.js 500 Internal Server Error right after calling useEffect Hook inside 404 Page

【发布时间】：2021-09-22 07:04:48

【问题描述】：

我正在调用 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) 在 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;

`

【参考方案1】：

您似乎以错误的方式导入了useRouter。 根据docs，它需要是这样的：

import  useRouter  from 'next/router';

【讨论】：

是同样的错误还是有什么不同？

我错过了 useEffect 和 useRouter 上的花括号。非常感谢您指出！！