index.jsx demo

import React from 'react';
import PropTypes from 'prop-types';
import Beatle from 'beatle';
import {browserHistory} from 'react-router';
import {Exception} from 'hc-components';

const exceptions = {
  403: {
    img: 'https://gw.alipayobjects.com/zos/rmsportal/wZcnGqRDyhPOEYFcZDnb.svg',
    title: '403',
    desc: '抱歉，你无权访问该页面'
  },
  404: {
    img: 'https://gw.alipayobjects.com/zos/rmsportal/KpnpchXsobRgLElEozzI.svg',
    title: '404',
    desc: '抱歉，你访问的页面不存在'
  },
  500: {
    img: 'https://gw.alipayobjects.com/zos/rmsportal/RVRUAYdCGeYNBWoKiIwB.svg',
    title: '500',
    desc: '抱歉，服务器出错了'
  }
};

export default class ExceptionScene extends React.PureComponent {
  static routeOptions = {
    name: 'NotFoundException',
    title: '404异常',
    layout: [
      'consoleLayout', 'landingLayout'
    ],
    LandingLayout: {
      components: {
        Brand: false
      },
      layoutProps: {
        style: {}
      }
    },
    query: {
      code: 404
    },

    path: 'feedback/:name',

    aliasRoutes: [{
      name: 'NoAuthException',
      title: '403异常',
      query: {
        code: 403
      }
    }, {
      name: 'ErrorException',
      title: '500异常',
      query: {
        code: 500
      }
    }]
  }

  static propTypes = {
    route: PropTypes.object
  }

  render() {
    const query = this.props.route.query;
    const links = [
      {
        type: 'primary',
        size: 'large',
        name: '返回首页',
        action: () => {
          browserHistory.replace(Beatle.route('/').resolvePath);
        }
      }
    ];
    return (<Exception
      data={exceptions[query.code]}
      style={{
        minHeight: 500,
        height: '80%'
      }}
      links={links}
    />);
  }
}