反应路由器:使用 <链接> 作为可点击的数据表行

onClick有效，但有时出于各种原因您需要一个实际的<a>标签：

• 可及性
• 渐进式增强（如果脚本抛出错误，链接仍然有效）
• 能够在新选项卡中打开链接
• 能够复制链接

下面是一个接受to属性的 Td 组件示例：

import React from 'react';
import { Link } from 'react-router-dom';
export default function Td({ children, to }) {
  // Conditionally wrapping content into a link
  const ContentTag = to ? Link : 'div';
  return (
    <td>
      <ContentTag to={to}>{children}</ContentTag>
    </td>
  );
}

然后像这样使用组件：

const users = this.props.users.map((user) =>
      <tr key={user.id}>
        <Td to={`/users/${user.id}/edit`}>{user.name}</Td>
        <Td to={`/users/${user.id}/edit`}>{user.email}</Td>
        <Td to={`/users/${user.id}/edit`}>{user.username}</Td>
      </tr>
    );

是的，您必须多次传递to道具，但同时您可以更好地控制可点击区域，并且表格中可能有其他交互式元素，例如复选框。

你为什么不直接使用 onClick？

var ReactTable = React.createClass({
  handleClick: function(e) {
    this.router.transitionTo('index');
  },
  render: function() {
    return(
      <div>
        <table>
          <thead>
            <tr>
              <th>Name</th>
              <th>Age</th>
              <th>Full Detail</th>
            </tr>
          </thead>
            <tbody>
              <tr onClick={this.handleClick.bind(this)}>
                <td>{user.name}</td>
                <td>{user.age}</td>
                <td>{details}</td>
              </tr>
            </tbody>
        </table>
      </div>
    );
  }
});

这个答案是基于@Igor Barbasin的建议。这会将链接添加到整行而不仅仅是内容，我们也不需要用"链接"包装所有单独的"td"元素。

.table-row {
  display: table-row
}

export default function Table() {
  return (
    <table>
        <thead>
            <tr>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            {/* treats the link element as a table row element */}
            <Link className="table-row">
                <td>Noname</td>
            </Link>
        </tbody>
    </table>
  )
}

useHistory()钩子：

宣：

const history = useHistory();

并将其与<tr>或<td>标签一起使用：

<tr onClick={() => history.push("/yoururl")}>
    <td>{this.props.whatever1}</td>
    <td>{this.props.whatever2}</td>
    <td>{this.props.whatever3}</td>
</tr>

{shipment.assets.map((i, index) => (
                              <tr
                                style={{ cursor: "pointer" }}
                                onClick={(e) => e.preventDefault()}
                              >
                                <td>{index + 1}</td>
                                <td>{i._id}</td>
                                <td>{i.status}</td>
                                <td></td>
                              </tr>
                            ))}