41 lines
1.7 KiB
TypeScript
Executable File
41 lines
1.7 KiB
TypeScript
Executable File
/**
|
||
* 错误处理模块 - 全局路由级错误展示组件
|
||
* 功能: 捕获React Router路由层级错误并展示可视化错误信息
|
||
* 特性:
|
||
* - 自动解析路由错误对象
|
||
* - 自适应错误信息展示
|
||
* - 响应式布局设计
|
||
*/
|
||
import { useRouteError } from "react-router-dom";
|
||
|
||
/**
|
||
* 错误展示页面组件
|
||
* @核心功能 呈现标准化错误界面，用于处理应用程序的路由层级错误
|
||
* @设计模式 采用展示型组件模式，完全解耦业务逻辑实现纯UI展示
|
||
* @使用示例 在React Router的RouterProvider中配置errorElement={<ErrorPage/>}
|
||
*/
|
||
export default function ErrorPage() {
|
||
// 使用React Router提供的Hook获取路由错误对象
|
||
// 类型定义为any以兼容React Router不同版本的类型差异
|
||
const error: any = useRouteError();
|
||
|
||
return (
|
||
// 主容器: 基于Flex的垂直水平双居中布局
|
||
// pt-64: 顶部留白实现视觉层次结构
|
||
<div className="flex justify-center items-center pt-64">
|
||
{/* 内容区块: 采用纵向弹性布局控制内部元素间距 */}
|
||
<div className="flex flex-col gap-4">
|
||
{/* 主标题: 强调性文字样式配置 */}
|
||
<div className="text-xl font-bold text-primary">
|
||
哦?页面似乎出错了...
|
||
</div>
|
||
|
||
{/* 错误详情: 动态渲染错误信息，实现优雅降级策略 */}
|
||
{/* 使用可选链操作符防止未定义错误，信息优先级: statusText > message */}
|
||
<div className="text-tertiary">
|
||
{error?.statusText || error?.message}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
} |