Reactjs React-如何使用链接包装表行

我有一张桌子，我用它做的。在那个表中，我有一行，看起来像这样：

<TableRow
    hover
    onClick={() => onRowClicked(item)}
    role="checkbox"
    aria-checked={isSelected}
    tabIndex={-1}
    key={item.id}
    data-testid={item.id}
    selected={isSelected}
    className={classes.tr}
  >
    <TableCell padding="checkbox" classes={{body: classes.smWidth}} onClick={(event) => onCheckboxClick(event, item.id)}>
      <Checkbox checked={isSelected}/>
    </TableCell>
    <TableCell component="th" scope="row" classes={{body: classes.id}}>{item.id}</TableCell>
    <TableCell align="left">{item.text}</TableCell>
    <TableCell align="left">{item.code}</TableCell>
    <TableCell align="left">{item.type}</TableCell>
    <TableCell align="left"><StatusLabel status={item.substatus || item.status} size="large"/></TableCell>
    <TableCell align="left">{getElapsedTime(new Date(item.updated), now)}</TableCell>
  </TableRow>

---

但是，那么整个桌子的造型就不合适了。那么，正确的方法是什么？

请确认，您是否有意链接到MUI文档的v3？仅供参考，这样做会生成无效的html。我建议要么在history.push中添加onClick，要么在td中添加链接，我认为这不是最佳选择。@lek是的，我使用的是v3，所以该链接是intentional@GiedriusVičkus我目前正在使用history.push和onClick，但那样的话，我就无法在带有control/cmd的新选项卡中打开链接click@Leff我认为没有一个好办法来处理这个问题。您可以将其作为同级，并添加一些css（容器{position:relative}，一个{position:absolute，top/left/right/bottom:0}），以某种方式将其放置在上面。但话说回来，您必须以某种方式处理复选框。

<Link to={`/${item.id}`}>
 <TableRow
    hover
    role="checkbox"
    aria-checked={isSelected}
    tabIndex={-1}
    key={item.id}
    data-testid={item.id}
    selected={isSelected}
    className={classes.tr}
  >
    <TableCell padding="checkbox" classes={{body: classes.smWidth}} onClick={(event) => onCheckboxClick(event, item.id)}>
      <Checkbox checked={isSelected}/>
    </TableCell>
    <TableCell component="th" scope="row" classes={{body: classes.id}}>{item.id}</TableCell>
    <TableCell align="left">{item.text}</TableCell>
    <TableCell align="left">{item.code}</TableCell>
    <TableCell align="left">{item.type}</TableCell>
    <TableCell align="left"><StatusLabel status={item.substatus || item.status} size="large"/></TableCell>
    <TableCell align="left">{getElapsedTime(new Date(item.updated), now)}</TableCell>
  </TableRow>
 </link>