为什么自定义 404 页面在 Next.js 13 中不起作用？

Question

在接下来的 13 中，我尝试使用自定义 404 页面，使用以下方法：https://nextjs.org/docs/app/api-reference/file-conventions/not-found。但是当我写下不匹配的 URL 时，我看到的是空白页面！

这是我自定义的 404 页面：

"use client"
import React,{useEffect} from 'react'


 const NotFound = () => {
  useEffect(()=>{
    console.log("not found")
  },[])
  return (
    <>
<div>not found</div>
    </>
  )
}
export default NotFound

这是我的文件夹结构：

这是未找到的布局（layout.tsx）：


  return (
    <>
    
      <main className="px-10 py-5 ">
    
        {children}
       
     </main>
    
    </>
  )

我可以在浏览器中看到 console.log("not found") 结果，但在浏览器中看不到

<div>Not found</div>

（它也不会显示在检查器中）。

Answer 1

事实证明，问题是我忘记将 html 和 body 标签添加到布局中，因为找不到（我在更新的问题中添加了错误的布局）。在我的 layout.tsx 中，我添加了 html 和 body 标签，它可以工作。这是我的新布局.tsx:


  return (
    <>
     <html lang="en" className="h-full w-full" >
      <body className="h-full w-full">
      <main className="px-10 py-5 ">
    
        {children}
       
     </main>
        </body>
     </html>
    </>
  )

为什么自定义 404 页面在 Next.js 13 中不起作用？

问题描述投票：0回答：1

1个回答

最新问题

为什么自定义 404 页面在 Next.js 13 中不起作用？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1