如何修復不能作為子<a>警告出現？</a>

Question

如何修復這些警告？ 我使用了材質 ui 表格組件。 我認為警告來自component={Link} to={ /patient/${patient.id} }

<TableContainer className={styles.tableContainer} component={Paper}>
      <Table aria-label="patients infomation table">
        <TableHead className={styles.tableHead}>
          <TableRow>
            <TableCell align="right">First Name</TableCell>
            <TableCell align="right">Last name</TableCell>
            <TableCell align="right">DOB</TableCell>
            <TableCell align="right">Phone Number</TableCell>
            <TableCell align="right">Email</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {patients.map((patient) => (
            <TableRow
              component={Link}
              to={`/patient/${patient.id}`}
              onClick={selectPatientClick}
              key={patient.id}
              className={styles.tableRow}
            >
              <>
                <TableCell align="right">{patient.fName}</TableCell>
                <TableCell align="right">{patient.lName}</TableCell>
                <TableCell align="right">{patient.dob}</TableCell>
                <TableCell align="right">{patient.pNumber}</TableCell>
                <TableCell align="right">{patient.email}</TableCell>
              </>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>

Answer 1

原因是您使用 Link 作為 TableRow 的組件。 prop 組件告訴 Material-UI 組件基於它將呈現所選組件的內容。 不要將鏈接作為組件傳遞，而是使用 TableRow 上的hover ...

 {patients.map((patient) => ( <TableRow hover onClick={selectPatientClick} key={patient.id} className={styles.tableRow} > <> <TableCell align="right">{patient.fName}</TableCell> <TableCell align="right">{patient.lName}</TableCell> <TableCell align="right">{patient.dob}</TableCell> <TableCell align="right">{patient.pNumber}</TableCell> <TableCell align="right">{patient.email}</TableCell> </> </TableRow> ))}

並在 function 中傳遞給該組件的 onClick 處理程序，使用history.push('/desired-route')以編程方式導航到您需要的路線。 只需從 react-router-dom 導入 useHistory 鈎子

 import {useHistory} from 'react-router-dom'... const history = useHistory() const selectPatientClick = () => { //do whatever you need and finally... history.push(`/patient/${patient.id}`) }

Answer 2

您不能使用 Link 作為 TableRow 的組件，而是使用useHistory和useRouteMatch鏈接到您想要的頁面，

import {useHistory, useRouteMatch} from 'react-router-dom'
...
const {url} = useRouteMatch()
const history = useHistory()
...
<TableRow
  onClick={() => history.push(`${url}/${patient.id}`)}
  key={patient.id}
  className={styles.tableRow}
>
...