react 如何在table里的一列设置 url ，点击可以跳转

import { Table } from "antd";
import React from "react";

export class Tables extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const columns = [
      {
        title: '姓名',
        dataIndex: 'name',
        align: 'center',
      },
      {
        title: '电话',
        dataIndex: 'tel',
        align: 'center',
      },
      {
        title: '地址',
        dataIndex: 'address',
        align: 'center',
      },
      {
        title: '邮箱',
        dataIndex: 'email',
        align: 'center',
      },
    ];

    const data = [
      {
        key: '1',
        name: 'John Brown',
        tel: '10086',
        address: '成都',
        email: '',
      },
      {
        key: '2',
        name: 'Jim Green',
        tel: '1008611',
        address: '上海',
        email: '',
      },
      {
        key: '3',
        name: 'Joe Black',
        tel: '10001',
        address: '深圳',
        email: '',
      },
    ];
    return (
      <Table
        columns={columns}
        dataSource={data}
        bordered
      />
    )
  }
}

column有render配置，返回链接对象就行，比如给name列添加链接，有帮助麻烦点个采纳【本回答右上角】，谢谢~~

       {
        title: '姓名',
        dataIndex: 'name',
        align: 'center',
        render: (text,r) => <a href={"xxx.html?id="+r.key} target="_blank">{text}</a>,
      }