无法在 React App 中添加指向 table 行的链接

Question

我编写了 React 函数来渲染 table。 That's how the table looks.

作为参数，它采用 JSON:

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

呈现行的 Table 函数的一部分：

<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>

我想将 link 添加到每一行的“/patient/$id”。我试着写这样的东西：

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

和

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

但它不起作用。我想寻求可以帮助我解决问题的建议或 links。

Answer 1

您应该在 react-router-dom 中使用 NavLink 组件。

import { NavLink } from "react-router-dom";

<td {...cell.getCellProps()}>
    <NavLink to={`/patient/` + cell.getCellProps().data.id}>
        {cell.render("Cell")}
    </NavLink>
</td>

Answer 2

如果您使用 react-router-dom，您可以通过多种方式重定向用户。

使用 <Link> 组件 (docs),
使用函数 useHistory (docs),
使用 <NavLink> 组件 (docs),
使用 <Redirect> 组件 (dosc)

无法在 React App 中添加指向 table 行的链接

Can't add links to table rows in React App

javascript

hyperlink

reactjs