🧪 路由实验室
选择一个主题,体验不同路由结构的效果
🔀
动态路由 [id]
用 [param] 方括号创建动态路径段,匹配不同参数渲染不同内容。URL 随参数变化,同一套模板复用。
app/routing-demo/posts/[id]/page.tsx⏳
加载状态 loading.tsx
页面异步加载时自动显示 loading.tsx 骨架屏,加载完成后无缝切换,提升用户体验。
app/routing-demo/slow-page/loading.tsx💥
错误边界 error.tsx
error.tsx 捕获渲染阶段异常,展示友好的错误 UI 和重试按钮,防止白屏崩溃。
app/routing-demo/buggy/error.tsx🚫
404 页面 not-found.tsx
notFound() 函数触发最近层级的 not-found.tsx,展示友好的未找到提示。
app/routing-demo/articles/[id]/not-found.tsx