异常页面 Unnormalcase
用于展示 业务错误状态码 的异常页面。
支持自定义返回路径、标题文案和描述信息,点击按钮可跳转到首页或自定义逻辑。
📦 引入方式
import { Error_403, Error_404, Error_500, Error_1001 } from '@npmqg/react-ui-unnormalcase';
🧩 使用示例
📚 基础用法
<Error_403 />
<Error_404 />
<Error_500 />
<Error_1001 />
📚 自定义跳转路径
<Error_1001 path="/dashboard" />
📚 自定义按钮与描述
<Error_1001 title="重新加载" desc="发生未知错误,请稍后重试" onClick={() => window.location.reload()} />
🧩 Props
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
path | string | '/' | 点击按钮时默认跳转的路径(若未传入 onClick ) |
title | ReactNode | '返回首页' | 按钮文字内容,可传入字符串或 React 节点 |
desc | ReactNode | '页面发生错误,请联系管理员' | 描述内容 |
onClick | () => void | undefined | 自定义点击逻辑,若存在则不会使用 path 跳转 |
📌 注意事项
title
与desc
支持ReactNode
,可传入字符串或 JSX 节点,灵活定制。- 若传入
onClick
,则会优先执行onClick
回调,而不会进行默认跳转。 - 默认状态码固定为 1001,适用于页面渲染错误白屏场景。