在 page.tsx 文件中抛出错误时，error.tsx 在 Next Js 14 中不起作用

Question

我有以下 page.tsx (app/register/page.tsx)

import Form from './form'

const user = null;

const page = () => {

    if (!user) {
        throw new Error('OOPS');
    }

    return (
        <div className='w-[300px] min-h-[400px] mx-auto mt-10'>
            <Form />
        </div>
    )
}

export default page

我还创建了 error.tsx 页面

"use client"

const error = ({error,reset}: {error: Error, reset: () => void}) => {
    <div className=" text-2xl text-black w-full bg-pink-600 h-10">Error</div>
}

export default error;

但是什么也没有显示出来。我只想测试我的 error.tsx 页面是否有效。但目前还不起作用。

我尝试将 page.tsx 更改为异步函数，但它不再起作用。另外我想问一下，如果我在 api 文件夹中抛出错误，然后我在 page.tsx 中获取数据并点击 api 路由，该错误是否会被处理

Answer 1

核心错误是你用小写命名了一个react组件，next中的所有组件都必须用大写字母命名，否则Next.js不会将其识别为组件，而是将其识别为函数。

其他事情

你这样做的方式是错误的，你将返回组件，然后它将被渲染：

if(!user) return <Error/>

在Next.js中，如果您想显示错误页面，我们只需将文件命名为

not-found.tsx

。您可以阅读Next.js 文档