如何添加<Link>每个 Material-UI TableRow 都有反应路由器吗？

Question

如何在 .map 中为每个 TableRow 添加链接？

*我的错误是 validateDOMNesting(...): 不能作为“< a >”的孩子出现，我使用的是 react router react-router-dom

如何在TableTableRow的.map的每个循环中添加链接？

   import React, { Fragment } from 'react'
import { Paper } from 'material-ui'
import Table from 'material-ui/Table';
import TableBody from 'material-ui/Table/TableBody';
import TableCell from 'material-ui/Table/TableCell';
import TableHead from 'material-ui/Table/TableHead';
import TableRow from 'material-ui/Table/TableRow';
import { connect } from 'react-redux'
// import { Edit, Delete } from '@material-ui/icons'
import { withStyles } from 'material-ui/styles'
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const drawerWidth = 100;
class Listofbond extends React.Component {
    render() {
        console.log(this.props);
        const { MainProps, classes } = this.props;
        return (
            <Router>
                <Paper>
                    <Table >
                        <TableHead>
                            <TableRow>
                                <TableCell>Bondame</TableCell>
                            </TableRow>
                        </TableHead>
                        <TableBody>
                            {[1, 2, 3].map(n => {
                                return (
                                    <Link to={`/bond/${n}/`} key={n}>
                                        <TableRow>
                                            <TableCell component="th" scope="row">
                                                {n}
                                            </TableCell>
                                        </TableRow>
                                    </Link>
                                );
                            })}
                        </TableBody>
                    </Table>
                </Paper>
            </Router>
        )
    }

}

export default Listofbond;

Answer 1

要做到这一点，正确的方法是使用component的道具的TableRow组成部分：

<TableRow component={Link} to={`/bond/${n}/`} key={n}>
...
</TableRow>

Answer 2

有很多解决方法，因为上面的解决方案在控制台上给出了一个错误validateDOMNesting(...) 。

1. 在<ColumnCell>内的文本本身（列值）周围添加Link标签，尽管它将文本更改为更像<a>标签..但你可以处理这个。 通过这样做style={{ textDecoration: 'none', color: 'black' }}

    <TableCell key={column.id} align={column.align}> <Link to={`/elsewhere/${row.id}`} style={{ textDecoration: 'none', color: 'black' }} > {value} </Link> </TableCell>

2. 为每个表格行创建一个按钮。

Answer 3

链接应用于定义了 onClick 的组件，因此将您的 TableRow 包装到一个 div 中，如下所示：

<Link to={`/bond/${n}/`} key={n}>
   <div>
     <TableRow>
       <TableCell component="th" scope="row">
         {n}
       </TableCell>
      </TableRow>
   </div>
</Link>