来自 react-router-dom 的链接无法与 material-ui 正常工作

Question

我正在使用react-router-dom和Material-ui

我想要完成的是在表中有一个可点击的行，该行路由到特定路径。

我的代码：

.map(client => (
  <TableRow key={client.id} component={Link} to="/">
    <TableCell>{client.name}</TableCell>
    <TableCell>{client.type}</TableCell>
    <TableCell>{client.bandwidth}</TableCell>
  </TableRow>))

进口：

import { Link } from 'react-router-dom';
import TableContainer from '@material-ui/core/TableContainer'
import Table from '@material-ui/core/Table'
import TableHead from '@material-ui/core/TableHead'
import TableBody from '@material-ui/core/TableBody'
import TableFooter from '@material-ui/core/TableFooter'
import TableRow from '@material-ui/core/TableRow'
import TableCell from '@material-ui/core/TableCell'

我找到的解决方案是<TableRow />内部的component={Link} to="/"

这一切都很好，直到我查看 Chrome 的控制台，我得到了错误

index.js:1 Warning: validateDOMNesting(...): <td> cannot appear as a child of <a>.

任何事情都可以帮助我解决这个问题。 我对 material-ui 很陌生，昨天才开始:-)

谢谢

编辑：完整代码

<TableContainer component={Paper}>
<Table size="small">
<TableHead>
<TableRow>
{headCells.map(((headCell) => (
<TableCell
key={headCell.id}
sortDirection={orderBy === headCell.id ? order : false}
>
{headCell.label}
</TableCell>
)))}


</TableRow>

</TableHead>
<TableBody>
{clients
.map(client => (
<TableRow key={client.id} component={Link} to="/">
<TableCell>{client.name}</TableCell>
<TableCell>{client.type}</TableCell>
<TableCell>{client.bandwidth}</TableCell>
</TableRow>))}

</TableBody>
</Table>
</TableContainer>

Answer 1

您可以使用withRouter从 react-router-dom 导出组件，然后在表格行上单击 function 您可以执行this.props.history.push('yourLink') 。

或喜欢

<TableRow key={client.id}>
  <Link  to={"/"}>  
    <TableCell>{client.name}</TableCell>
    <TableCell>{client.type}</TableCell>
    <TableCell>{client.bandwidth}</TableCell>
  </Link>
</TableRow>