react结合antd4.0和umi3.0的404界面

import { Button, Result } from 'antd';
import React from 'react';
import { history } from 'umi';

// FC = Functional Component 使用这个类型有个好处就是,提醒你必须返回一个ReactNode 
// 在函数式组件中,无法像在类组件中一样使用state和生命钩子函数,但React提供了HOOK
const NoFoundPage: React.FC<{}> = () => (
  <Result
    status={404}
    title="404"
    subTitle="Sorry, the page you visited does not exist."
    extra={
      <Button type="primary" onClick={() => history.push('/')}>
        Back Home
      </Button>
    }
  />
);

export default NoFoundPage;
{ path: '*', component: '@/pages/404' },

 

posted @ 2020-05-26 18:02  鱼樱前端  阅读(1606)  评论(0编辑  收藏  举报