not-found.js
当在路由段中抛出 notFound
函数时,not-found 文件用于渲染 UI。除了提供自定义 UI 外,Next.js 将为流式响应返回 200
HTTP 状态代码,为非流式响应返回 404
。
app/not-found.tsx
import Link from 'next/link'
export default function NotFound() {
return (
<div>
<h2>Not Found</h2>
<p>Could not find requested resource</p>
<Link href="/">Return Home</Link>
</div>
)
}
参考
Props
not-found.js
组件不接受任何 props。
须知:除了捕获预期的
notFound()
错误外,根目录app/not-found.js
文件还处理整个应用程序的任何不匹配的 URL。这意味着访问应用程序未处理的 URL 的用户将看到由app/not-found.js
文件导出的 UI。
示例
数据获取
默认情况下,not-found
是一个服务器组件。你可以将其标记为 async
以获取和显示数据
app/not-found.tsx
import Link from 'next/link'
import { headers } from 'next/headers'
export default async function NotFound() {
const headersList = await headers()
const domain = headersList.get('host')
const data = await getSiteData(domain)
return (
<div>
<h2>Not Found: {data.name}</h2>
<p>Could not find requested resource</p>
<p>
View <Link href="/blog">all posts</Link>
</p>
</div>
)
}
如果你需要使用客户端组件钩子(如 usePathname
)来显示基于路径的内容,则必须在客户端获取数据。
版本历史
版本 | 变更 |
---|---|
v13.3.0 | 根目录 app/not-found 处理全局不匹配的 URL。 |
v13.0.0 | 引入 not-found 。 |
这有帮助吗?