如何将PrimeReact DataTable的行数据(rowData)传递至跳转后的页面

下面提供三种实用方案，帮你把DataTable当前行的rowData传递到/PerfilLink页面：

方案1：通过URL参数传递（推荐，支持页面刷新） #

这种方式把行数据的唯一标识（比如id）拼到URL中，目标页面通过该标识从数据源获取完整数据，刷新页面后数据不会丢失。

修改actionBodyTemplate： #

const actionBodyTemplate = (rowData) => {
  return (
    <Link to={`/PerfilLink/${rowData.id}`}>
      <Button
        icon="pi pi-arrow-right"
        className="p-button-rounded p-button-info p-mr-2"
      ></Button>
    </Link>
  );
};

目标页面/PerfilLink获取数据： #

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

const PerfilLink = () => {
  const { id } = useParams();
  // 从你的数据源中匹配对应ID的车辆数据
  const targetBus = mixMantenimiento.find(item => item.id === id);

  return (
    <div>
      <h2>{targetBus?.bus_name}</h2>
      <p>ID: {targetBus?.id}</p>
      <p>Estado Carga: {targetBus?.soc}</p>
      {/* 其他数据渲染 */}
    </div>
  );
};

方案2：通过React Router的state传递完整数据 #

直接把整行数据放到路由的state中传递，无需再次查询数据源，但页面刷新后state会丢失，适合临时场景。

修改actionBodyTemplate： #

const actionBodyTemplate = (rowData) => {
  return (
    <Link to={{
      pathname: '/PerfilLink',
      state: { busData: rowData }
    }}>
      <Button
        icon="pi pi-arrow-right"
        className="p-button-rounded p-button-info p-mr-2"
      ></Button>
    </Link>
  );
};

目标页面/PerfilLink获取数据： #

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

const PerfilLink = () => {
  const location = useLocation();
  const busData = location.state?.busData;

  if (!busData) {
    return <div>No se encontraron datos del bus</div>;
  }

  return (
    <div>
      <h2>{busData.bus_name}</h2>
      <p>Kilometraje: {busData.odometer}</p>
      {/* 其他数据渲染 */}
    </div>
  );
};

方案3：利用表格的选中状态传递数据 #

你已经启用了表格的单选模式，可以结合选中状态来传递数据，确保跳转时使用已选中的行数据。

修改actionBodyTemplate： #

const actionBodyTemplate = (rowData) => {
  // 点击按钮时先选中当前行
  const handleButtonClick = () => {
    setSelectedBus(rowData);
  };

  return (
    <Link 
      to={{
        pathname: '/PerfilLink',
        state: { busData: selectedBus }
      }}
      onClick={handleButtonClick}
    >
      <Button
        icon="pi pi-arrow-right"
        className="p-button-rounded p-button-info p-mr-2"
      ></Button>
    </Link>
  );
};

目标页面获取数据同方案2（使用useLocation） #

这种方式适合需要依赖选中状态做其他操作的场景，比如批量处理等。

内容的提问来源于stack exchange，提问作者Hugo Urbina