Exception异常

异常页用于对页面特定的异常状态进行反馈。通常,它包含对错误状态的阐述,并向用户提供建议或操作,避免用户感到迷失和困惑。

引用方式:

  1. import Exception from 'ant-design-pro/lib/Exception';

详细使用方式请参照:独立使用 pro 组件

代码演示

Exception 异常 - 图1

404 页面

404 页面。

  1. import Exception from 'ant-design-pro/lib/Exception';
  2. ReactDOM.render(<Exception type="404" />, mountNode);

Exception 异常 - 图2

500 页面

500 页面。

  1. import Exception from 'ant-design-pro/lib/Exception';
  2. ReactDOM.render(<Exception type="500" />, mountNode);

Exception 异常 - 图3

403 页面

403 页面,配合自定义操作。

  1. import Exception from 'ant-design-pro/lib/Exception';
  2. import { Button } from 'antd';
  3. const actions = (
  4. <div>
  5. <Button type="primary">Home</Button>
  6. <Button>Detail</Button>
  7. </div>
  8. );
  9. ReactDOM.render(<Exception type="403" actions={actions} />, mountNode);

API

参数说明类型默认值
backText默认的返回按钮文本ReactNodeback to home
type页面类型,若配置,则自带对应类型默认的 titledescimg,此默认设置可以被 titledescimg 覆盖Enum {'403', '404', '500'}-
title标题ReactNode-
desc补充描述ReactNode-
img背景图片地址string-
actions建议操作,配置此属性时默认的『返回首页』按钮不生效ReactNode-
linkElement定义链接的元素string|ReactElement'a'
redirect返回按钮的跳转地址string'/'