核心价值`error` 捕获渲染与数据获取异常,并提供 `reset` 恢复路径。`not-found` 统一 404 呈现,与 `notFound()` 触发配合,保持导航一致性。error 组件// app/posts/error.tsx 'use client' export default function Error({ error, reset }: { error: Error; reset: () => void }) { return ( <div role="alert"> <h2>发生错误</h2> <pre>{error.message}</pre> <button onClick={() => reset()}>重试</button> </div> ) } not-found 组件与触发// app/posts/not-found.tsx export default function NotFound() { return <h2>内容不存在</h2> } // app/posts/[id]/page.tsx import { notFound } from 'next/navigation' export default async function Page({ params }: { params: { id: string } }) { const post = await fetch(`https://api.example.com/posts/${params.id}`).then(r => r.ok ? r.json() : null) if (!post) notFound() return <article><h1>{post.title}</h1></article> } 治理建议对 404/410 等状态使用 `notFound()` 而非抛错,避免混淆错误类型。在路由层保持错误与未找到的清晰边界,并记录必要日志以便排查。结论`error` 与 `not-found` 提供清晰的状态治理模型,配合 RSC 渲染与导航可在异常与缺失场景下保持体验可控与一致。

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论
立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部
2.073612s