How to use React Router <Link > with an id from antd table column - reactjs

Question

In my project, I have an antd table. In that table, I'm listing athletes. When I click on the athlete's name, I should be navigated to the athlete profile page.
Route for athlete profile /athletes/{id}
But with the table, I can't get any value for this id.
Here is my data source
[
{
email: "x#x.com",
firstName: "X",
id: 402,
lastName: "X"
},
{
email: "y#y.com",
firstName: "Y",
id: 403,
lastName: "Y"
},
{
email: "z#z.com",
firstName: "Z",
id: 404,
lastName: "Z"
}
]
And following is the code for the column object
const columns = [
{
title: "First Name",
dataIndex: "firstName",
className: "col-first-name",
render: (text) => (
<Link to={"/athletes/" + ???}>{text}</Link>
),
},
{
title: "Last Name",
dataIndex: "lastName",
className: "col-last-name"
},
{
title: "Email",
dataIndex: "email",
className: "col-email",
}
];
(I have added "???" where the id should be, in the above code)
Is there any way to add the id property into the ? Can anyone help me with this?
react-router version - "^5.1.2"
antd version - ^3.25.3

Answer 1

You need to pass another parameter inside render which is record which contains all data about that specific row. Something like this:
const columns = [
{
title: "First Name",
dataIndex: "firstName",
className: "col-first-name",
render: (text,record) => (
<Link to={"/athletes/" + record.id}>{text}</Link>
),
},
{
title: "Last Name",
dataIndex: "lastName",
className: "col-last-name"
},
{
title: "Email",
dataIndex: "email",
className: "col-email",
}
];
I created this demo for reference: https://stackblitz.com/edit/react-ym57ax?file=index.js

Answer 2

The render function receive three parameters: first one is retrieved using the dataIndex, second one is the complete record and last one is the index.
You can use:
const columns = [{
title: "First Name",
dataIndex: "firstName",
className: "col-first-name",
render: (text, record) => (
<Link to={`/athletes/${record.id}`}>{text}</Link>
),
}, {
title: "Last Name",
dataIndex: "lastName",
className: "col-last-name"
}, {
title: "Email",
dataIndex: "email",
className: "col-email",
}];