错误处理
error.tsx 文件约定处理 嵌套路由 中意外的运行时错误。将错误隔离到受影响的段，同时保持应用的其余部分正常运行。
app/dashboard/error.tsx
'use client'
export default function Error({error,reset}: {
error: Error,
reset: () => void
}) {
return (
<div>
<h2>出错啦</h2>
<button onClick={()=>reset()}>重试一下</button>
</div>
)
};
app/dashboard/page.tsx
export default function Page() {
throw new Error('页面有问题')
return (
<h1 className={"text-3xl text-blue-500"}>Hello, dashboard!</h1>
)
};
并行路由
同时或有条件地在同一布局中渲染一个或多个页面。当然也可以在每个路由独立流式传输时定义独立的错误和加载状态。
export default function Analytics() {
return (
<div>
Analytics Page
</div>
)
};
import type {Metadata} from "next";
import {Inter} from "next/font/google";
import "./globals.css";
import React, {Suspense} from "react";
import Loading from "@/app/loading";
const inter = Inter({subsets: ["latin"]});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout(props: {
children: React.ReactNode,
analytics: React.ReactNode,
team: React.ReactNode
}) {
return (
<html lang="en">
<body className={inter.className}>
<Suspense fallback={<Loading/>}>
RootLayout
{props.children}
{props.analytics}
{props.team}
</Suspense>
</body>
</html>
);
}
