From 7af770adefeaa682feeb2d9ce389354a8ac360e3 Mon Sep 17 00:00:00 2001
From: imbytecat <imbytecat@gmail.com>
Date: Sun, 18 Jan 2026 04:00:08 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E9=94=99=E8=AF=AF=E5=92=8C404=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加错误组件以显示未处理的错误信息
- 将NotFound组件重命名为NotFoundComponent并更新显示文本为404 - Not Found。
- 使用自定义错误和未找到页面组件替换默认的错误和404提示。
---
 src/components/Error.tsx    | 3 +++
 src/components/NotFount.tsx | 4 ++--
 src/routes/__root.tsx       | 6 ++++--
 3 files changed, 9 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Error.tsx

diff --git a/src/components/Error.tsx b/src/components/Error.tsx
new file mode 100644
index 0000000..f25b194
--- /dev/null
+++ b/src/components/Error.tsx
@@ -0,0 +1,3 @@
+export function ErrorComponent() {
+  return <div>An unhandled error happened!</div>
+}
diff --git a/src/components/NotFount.tsx b/src/components/NotFount.tsx
index ee49503..fec55b7 100644
--- a/src/components/NotFount.tsx
+++ b/src/components/NotFount.tsx
@@ -1,3 +1,3 @@
-export function NotFound() {
-  return <div>Not Found</div>
+export function NotFoundComponent() {
+  return <div>404 - Not Found</div>
 }
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index f3b1d0c..c652d53 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -1,6 +1,8 @@
 import { TanStackDevtools } from '@tanstack/react-devtools'
 import { createRootRoute, HeadContent, Scripts } from '@tanstack/react-router'
 import type { ReactNode } from 'react'
+import { ErrorComponent } from '@/components/Error'
+import { NotFoundComponent } from '@/components/NotFount'
 import { devtools as queryDevtools } from '@/integrations/tanstack-query'
 import { devtools as routerDevtools } from '@/integrations/tanstack-router'
 import appCss from '@/styles.css?url'
@@ -27,8 +29,8 @@ export const Route = createRootRoute({
     ],
   }),
   shellComponent: RootDocument,
-  errorComponent: () => <div>Error</div>,
-  notFoundComponent: () => <div>404 - Not Found</div>,
+  errorComponent: () => <ErrorComponent />,
+  notFoundComponent: () => <NotFoundComponent />,
 })
 
 function RootDocument({ children }: Readonly<{ children: ReactNode }>) {