【Next】错误处理和并行路由

news2025/11/4 10:24:04

错误处理

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>
    );
}