Skip to main content

异常页面 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

属性名类型默认值说明
pathstring'/'点击按钮时默认跳转的路径(若未传入 onClick
titleReactNode'返回首页'按钮文字内容,可传入字符串或 React 节点
descReactNode'页面发生错误,请联系管理员'描述内容
onClick() => voidundefined自定义点击逻辑,若存在则不会使用 path 跳转

📌 注意事项

  • titledesc 支持 ReactNode,可传入字符串或 JSX 节点,灵活定制。
  • 若传入 onClick,则会优先执行 onClick 回调,而不会进行默认跳转。
  • 默认状态码固定为 1001,适用于页面渲染错误白屏场景。