Can't add links to table rows in React App

Question

I wrote React function to render table. That's how the table looks.

As a parameter it takes JSON:

{
    "id": 1,
    "firstName": "Richard",
    "lastName": "Morrison",
    "numberOfAccidents": 1
},
{
    "id": 3,
    "firstName": "Gregory",
    "lastName": "House",
    "numberOfAccidents": 5
} 

Part of Table function which render rows:

<tbody {...getTableBodyProps()}>
{rows.map((row) => {
    prepareRow(row)
    return (
        <tr {...row.getRowProps()}>
            {row.cells.map(cell => {
                return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
            })}
        </tr>
    )
})}
</tbody>

I want to add link to '/patient/$id' to each row. I tried to write something like:

return <td to={‘/patient/’ + cell.getCellProps().data.id} {...cell.getCellProps()}>{cell.render('Cell')}</td>

and

const handlerRowClick = (row) => { history.push(`/patient/${row.original.id}`); }
...
return <td onClick={() => handlerRowClick(row)} {...cell.getCellProps()}>{cell.render('Cell')}</td> 

but it doesn't work. I would like to ask for advice or links which can help me to solve my problem.

Answer 1

If you use react-router-dom, you can redirect users on several ways.

1. Using <Link> component (docs),
2. Using function useHistory (docs),
3. Using <NavLink> component (docs),
4. Using <Redirect> component (dosc)