如何将列 link 添加到 material-ui table 并使用列 link id 重定向到摘要详细信息页面

Question

我在Material-UItables,比如下面basic table但是我在开头添加了一个id列

假设我在我的 React 应用程序中的路由 localhost:3000/basic-table 中有这个基本的 table 示例，我如何使用下面的代码并将 <tableCell>{row.id}</tableCell> 变成 <a href link> 这将允许用户单击此 {row.id} 列，然后向用户显示一个新屏幕，我可以在其中获取此 ID 并显示有关它的更多数据？

我还需要一种返回主页报告的方法，即父页面。

我想要实现的基本上是来自主父报告，用户可以单击行 ID，然后会向用户显示基于该 ID 的详细报告，即像向下钻取报告.

在 doco 中，我找不到任何可以实现此目的的示例，因为不确定如何添加列 link。

任何人都可以帮助解决这个问题或给我举个例子。

      {rows.map((row) => (
        <TableRow key={row.id}>
          <TableCell component="th" scope="row">
            {row.id}
          </TableCell>
          <TableCell align="right">{row.name}</TableCell>
          <TableCell align="right">{row.calories}</TableCell>
          <TableCell align="right">{row.fat}</TableCell>
          <TableCell align="right">{row.carbs}</TableCell>
          <TableCell align="right">{row.protein}</TableCell>
        </TableRow>
      ))}

Answer 1

您可以使用历史记录API

import { useHistory } from 'react-router-dom';

const YourComponent = () => {
...
const history = useHistory();
return {
    ...
    rows.map((row) => (
        <TableRow key={row.id} onClick={() => history.push(yourLocation)}>
          <TableCell component="th" scope="row">
            {row.id}
          </TableCell>
          <TableCell align="right">{row.name}</TableCell>
          <TableCell align="right">{row.calories}</TableCell>
          <TableCell align="right">{row.fat}</TableCell>
          <TableCell align="right">{row.carbs}</TableCell>
          <TableCell align="right">{row.protein}</TableCell>
        </TableRow>
      ))}
}