前端点击按钮开启新页面(Ant Design)

1、路由文件里(route.tsx)创建好路由

{
    name: '查询联系方式详情',//路由中文名(描述)
    path: '/search/activity/contactDetail/:memberId',//路由(网址path)
    component: './activity/ContactDetail',//组件位置(项目中的组件位置)
}

2、组件文件里(ContactDetail.tsx)创建组件内容

import { Col, Row } from 'antd';
import React from 'react';
import { KeepAlive } from 'umi';

import { PageContainer } from '@ant-design/pro-layout';
import ManuallyAddContactView from './ManuallyAddContactView';
import LatestContactView from './LatestContactView';
import ContactInfLogView from './ContactInfLogView';

interface IProps {
  match: {
    params: {
      memberId?: string;
    };
  };
}

const MemberContactDetail: React.FC<IProps> = (props: IProps) => {
  const memberId = props.match.params?.memberId;
  return (
    <KeepAlive
      saveScrollPosition="screen"
      id={`联系方式详情${memberId}`}
      name={`联系方式详情${memberId}`}
      path={`/search/activity/contactDetail/${memberId}`}
    >
      <PageContainer title={false} breadcrumbRender={false} pageHeaderRender={false}>
        <Row gutter={8}>
          <Col span={24}>
            <ContactView1 memberId={memberId} />
          </Col>
          <Col span={24}>
            <ContactView2 memberId={memberId} />
          </Col>
          <Col span={24}>
            <ContactView3 memberId={memberId} />
          </Col>
        </Row>
      </PageContainer>
    </KeepAlive>
  );
};
export default MemberContactDetail;

组件中添加了三个ContactView的网格布局组件<col>,每个ContactView展示不同的新组件内容

3、编写ContactView.tsx组件

import { Alert, Card } from 'antd';
import React from 'react';

import { VO } from './data';
import { useRequest } from 'umi';
import ProTable, { ProColumns } from '@ant-design/pro-table';

interface IProps {
  memberId?: string;
}

const ContactInfLogView: React.FC<IProps> = ({ memberId }) => {

  const { data, loading } = useRequest<API.Result<VO[]>>(() => ({
    url: `/api/activity/contact?memberId=${memberId}`,
    method: 'GET',
  }));//用来调用后端的GET接口/api/activity/contact?memberId=${memberId}来获取数据

  if (data != undefined && data.length > 10){
    for (let i = 0;i < data.length;i++){
        data[i].id = i;
    }
  }

  if (loading) {
    return <Alert message="加载中..." type="info" />;
  }

  const columns: ProColumns<MemberContactDetailVO>[] = [
    {
        title: 'id',
        dataIndex: 'id',
        width: '8%',
        hideInTable: true
    },
    {
        title: '姓名',
        dataIndex: 'contactName',
        width: '8%',
    },
    {
        title: '关系',
        dataIndex: 'relation',
        width: '8%',
    },
    {
        title: '联系方式',
        dataIndex: 'contactMobile',
        width: '8%',
    },
    {
        title: '创建时间',
        dataIndex: 'crtTime',
        valueType: 'dateTime',
        width: '10%',
    },
  ];

  return (
    <Card
      size="small"
      title="联系方式"
    >
      <ProTable<MemberContactDetailVO>
        size="small"
        pagination={{ defaultPageSize: 10 }}
        rowKey={'id'}
        bordered
        search={false}
        dataSource={data}
        columns={columns}
        toolBarRender={false}
      />
    </Card>
  );
};
export default ContactInfLogView;

4、在数据对象文件里(data.ts)创建第三步里的VO对象

export interface MemberContactDetailVO {
    id:number;
    contactName: string; // 联系人姓名
	relation: string; // 关系
	contactMobile: string; // 联系方式
	crtTime: Date;  // 操作时间
}

5、在需要添加点击开启新页面的按钮里设置跳转的路由网址

<Button
    size="middle"
    type="primary"
    onClick={() => {
        history.push(
            `/search/activity/contactDetail/${memberId}`,
        );
    }}
>
我是按钮,按我跳转
</Button>