向表行添加“重定向到点击页面”功能时，validateDOMNesting（...）警告

Question

我有一个ReactJS项目，并且正在将Material UI用于UI框架。在其中一个页面上，我有一个消息表，有点像一个收件箱，我想在其中将用户重定向到另一个页面，该页面包含用户单击的消息行的整个线程。

我的代码如下：

<TableBody>
              {this.state.messageList.map((row, index) => {
                return (
                  <TableRow key={index} hover
                    style={{ textDecoration: "none" }} //to remove underline
                    component={Link} to={`/messages/thread/${row.messageid}`}
                  >
<TableCell>{row.attachments.length !== 0 && <AttachFileIcon />}</TableCell>
                      <TableCell>
                        <Typography style={{ fontWeight: row.viewedon == null && "bold" }}>{row.note}</Typography>
                      </TableCell>
                      <TableCell>
                        <Typography>{moment(row.created).format("DD-MMM-YYYY HH:mm")}</Typography>
                      </TableCell>
</TableRow>

但是，无论列表上有多少项，我都会在控制台上收到以下警告。

Warning: validateDOMNesting(...): <td> cannot appear as a child of <a>.
...
Warning: validateDOMNesting(...): <td> cannot appear as a child of <a>
...
Warning: validateDOMNesting(...): <td> cannot appear as a child of <a>.
...
Warning: validateDOMNesting(...): <a> cannot appear as a child of <tbody>.
...

我相信问题在于将TableRow链接到链接的方式，但是我不确定如何解决它。

在此方面，我将不胜感激。

谢谢。