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

• 无障碍
• 渐进增强（如果脚本抛出错误，链接仍然有效）
• 能够在新选项卡中打开链接
• 复制链接的能力

下面是一个接受toprop的 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>
    );

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

为什么不直接使用 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>
  )
}

{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>
                            ))}