如何将来自 React router dom 的链接放入 Material UI 表中

Question

正如标题所说，我需要将 Link 放在 Material UI 的表格中，但是我得到了这两个错误<td> cannot appear as a child of <a> <a> cannot appear as a child of <tr> 。 现在显然我知道这两个错误消息的含义，但我需要将链接放在单元格周围的容器中，因为我需要能够单击行内的任意位置以重定向到另一个页面。

这是我的代码：

 <TableRow key={index}>
            <Link
              to={`/edit/${apiData.id}/${apiData.name}/${apiData.email}`}
            >
            <TableCell align="left" style={{ paddingLeft: 40 }}>
              {apiData.name}
            </TableCell>
            <TableCell align="left">{apiData.email}</TableCell>
            <TableCell align="left">{apiData.status}</TableCell>
            <TableCell align="left">{roles}</TableCell>
            </Link>
            <TableCell align="right" style={{ paddingRight: 40 }}>
              <RoleButton onClick={handleRoleChange}>
                {roles === "Admin" ? "Set as User" : "Set as Admin"}
              </RoleButton>
            </TableCell>
          </TableRow>

任何人都知道如何解决这个问题，如果你知道，我将不胜感激

Answer 1

您可以在TableRow中使用onClick 。

function HomeButton() {
  let history = useHistory();

  function onRowClick(name) {
    history.push(`/user/${name}`);
  }

  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableCell>Name</TableCell>
          <TableCell>Age</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow onClick={() => onRowClick('tom')}>
          <TableCell>Tom</TableCell>
          <TableCell>26</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}