How to wrap whole row to React Router Link in antd

Question

I have a table and need wrap every table row to Link. How can I do that? I need that when I click on the row I go to another route. I’ve already figured out how to make a link every cell, but with the whole row I don’t know how to make

const AccountList = props => {

  const columns = [
    {
      title: "Acc",
      dataIndex: "fullName",
      key: "fullName",
      width: 170,
    },
    {
      title: "Number",
      dataIndex: "ID",
      key: "ID",
      width: 100
    },

  ];

  return (
    <div style={{ margin: "15px" }}>
      <Table
        columns={columns}
        dataSource={accInfoProps}
        pagination={false}
        size={"small"}
        title={() => <h2 style={{ float: "left" }}>Список аккаунтов</h2>}
        onRow={(record) => {
          return {
            onClick: () => {
              console.log(record.id)
            },
          };
        }}
      />
      ,
      <Pagination
        onChange={onChange}
        style={{ float: "right", marginTop: "15px" }}
        defaultCurrent={1}
        total={500}
      />
    </div>
  );
};

export default AccountList;

Thanks in advance

Answer 1

Use onRow event handler on Table component to route to desired link onClick. If using react-router-dom, you can use the Redirect component to navigate to the new link.

<Table
  onRow={(record, rowIndex) => {
    return {
      onClick: event => <Redirect push to={record.link}/>
    };
  }}