如何为React Table单元格添加跳转至指定页面的链接？

首先确保你的项目已经集成了react-router-dom（如果没有，先安装：npm install react-router-dom 或 yarn add react-router-dom），然后可通过以下两种方式实现需求：

方法一：使用Link组件（推荐，语义化且符合路由最佳实践） #

修改列配置，为需要跳转的单元格包裹Link组件，同时可传递用户ID参数给目标页面：

import { Link } from 'react-router-dom';

const columns = React.useMemo(
  () => [
    {
      Header: '',
      accessor: 'checked',
      Cell: () => {
        return (
          <div>
            <input type="checkbox" />
          </div>
        );
      },
    },
    {
      Header: 'User ID',
      accessor: 'id',
      Cell: ({ value, row }) => (
        <Link to={`/individual-user/${row.original.id}`}>{value}</Link>
      ),
    },
    {
      Header: 'Name',
      accessor: 'name',
      Cell: ({ row }) => {
        const fullName = `${row.original.firstName} ${row.original.lastName}`;
        return <Link to={`/individual-user/${row.original.id}`}>{fullName}</Link>;
      },
    },
    {
      Header: 'Email',
      accessor: 'email',
      Cell: ({ value, row }) => (
        <Link to={`/individual-user/${row.original.id}`}>{value}</Link>
      ),
    },
    {
      Header: 'Mobile Number',
      accessor: 'mobileNumber',
      Cell: ({ value, row }) => (
        <Link to={`/individual-user/${row.original.id}`}>{value}</Link>
      ),
    },
    {
      Header: 'Status',
      accessor: 'status',
      Cell: ({ value, row }) => (
        <Link to={`/individual-user/${row.original.id}`}>{value}</Link>
      ),
    },
    {
      Header: '',
      accessor: 'action',
      Cell: () => {
        return (
          <div>
            <Button className="text-black" title="Edit User Schedule" onClick={handleClick}>
              <MoreVertIcon />
            </Button>
          </div>
        );
      },
    },
  ],
  [],
);

说明： #

• 示例中给跳转路径添加了用户ID（/individual-user/${row.original.id}），方便目标页面通过useParams获取用户信息，不需要传参的话直接写to="/individual-user"即可。
• Link组件会渲染为标准<a>标签，自带跳转语义，样式可通过CSS自定义。

方法二：使用useNavigate钩子（适合需要自定义点击逻辑的场景） #

如果需要在跳转前执行额外逻辑（比如确认提示、日志记录），可以用useNavigate钩子：

import { useNavigate } from 'react-router-dom';

// 在组件内部初始化导航函数
const navigate = useNavigate();

const columns = React.useMemo(
  () => [
    {
      Header: '',
      accessor: 'checked',
      Cell: () => <div><input type="checkbox" /></div>,
    },
    {
      Header: 'User ID',
      accessor: 'id',
      Cell: ({ value, row }) => (
        <span 
          onClick={() => {
            // 可添加自定义逻辑，比如弹窗确认
            navigate(`/individual-user/${row.original.id}`);
          }}
          style={{ cursor: 'pointer', color: '#0066cc', textDecoration: 'underline' }}
        >
          {value}
        </span>
      ),
    },
    {
      Header: 'Name',
      accessor: 'name',
      Cell: ({ row }) => {
        const fullName = `${row.original.firstName} ${row.original.lastName}`;
        return (
          <span 
            onClick={() => navigate(`/individual-user/${row.original.id}`)}
            style={{ cursor: 'pointer', color: '#0066cc', textDecoration: 'underline' }}
          >
            {fullName}
          </span>
        );
      },
    },
    // Email、Mobile Number、Status列按上述方式修改
    {
      Header: '',
      accessor: 'action',
      Cell: () => (
        <div>
          <Button className="text-black" title="Edit User Schedule" onClick={handleClick}>
            <MoreVertIcon />
          </Button>
        </div>
      ),
    },
  ],
  [navigate], // 需添加navigate到依赖数组
);

说明： #

• 手动添加了光标样式和下划线，模拟链接的视觉效果，可根据项目UI规范调整CSS。
• 点击事件内可灵活插入自定义逻辑，满足复杂场景需求。

内容的提问来源于stack exchange，提问作者Jennifer De Goede