如何在react-admin中向Show页面传递完整数据记录？

react-admin的ShowButton默认只会把记录的id传递到目标页面，所以详情页只能通过id重新请求数据。要直接传递整条记录，你可以通过路由state来实现，下面是具体步骤：

步骤1：自定义详情按钮，替换默认的ShowButton #

在你的list.tsx中，写一个自定义按钮，点击时把当前行的整条记录放到路由state里：

import { useNavigate } from 'react-router-dom';
import { Button, useRecordContext } from 'react-admin';

// 自定义详情按钮
const CustomShowButton = () => {
  const navigate = useNavigate();
  const record = useRecordContext(); // 获取当前行的完整记录

  const goToDetail = () => {
    // 跳转到详情页，并把记录存入路由state
    navigate(`/details/${record.id}/show`, { state: { record } });
  };

  return <Button label="detail" onClick={goToDetail} />;
};

// 在DataGrid中使用自定义按钮
<DataGrid whiteSpace="nowrap" rowClick="edit">
  <CustomShowButton />
</DataGrid>

步骤2：在详情页获取路由state中的记录 #

修改你的detail.tsx，通过useLocation钩子拿到路由state里的记录，同时兼容直接访问详情页的情况（此时state没有数据，需要通过id请求）：

import { useLocation } from 'react-router-dom';
import { ShowBase, SimpleShowLayout, TextField } from 'react-admin';

const Details = () => {
  const location = useLocation();
  // 从路由state中取出记录
  const recordFromList = location.state?.record;

  // ShowBase如果传入record属性，会直接使用该记录，不再发起getOne请求
  // 如果没有传入（比如直接访问URL），则自动通过URL中的id请求数据
  return (
    <ShowBase record={recordFromList}>
      <SimpleShowLayout>
        <TextField source="id" />
        <TextField source="你的其他字段名" />
        {/* 按需添加更多字段 */}
      </SimpleShowLayout>
    </ShowBase>
  );
};

export default Details;

注意事项 #

1. 路由state中的数据在页面刷新后会丢失，所以详情页必须兼容无state的情况（也就是通过id重新请求数据），避免刷新后页面出错。
2. 如果记录包含敏感信息，不建议通过state传递，因为state会被存在浏览器的历史记录中，有安全风险。
3. 确保useRecordContext能正确拿到当前行的记录——DataGrid的每一行都会自动注入record上下文，所以只要按钮是在DataGrid的列中，就能正常获取。

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