嵌套资源子路由下EditBase组件跳转异常问题排查

问题根源 #

React Admin的Edit/EditBase组件默认依赖对应资源的标准路由结构（如/request_details/:id），会自动从路由参数id读取资源ID，同时检查当前路由是否匹配该资源的路由规则。你的嵌套路由/requests/:reqID/participant/:partID既不符合request_details的标准路由，也没有提供组件预期的id参数，因此组件会触发重定向到request_details的默认页面并报错。

解决方案 #

方案1：手动控制数据获取与提交（更灵活） #

直接绕过Edit/EditBase的自动路由绑定，手动获取数据、构建表单并处理提交：

import { useParams, useGetOne, useUpdate, Form, TextInput, SaveButton, Toolbar } from 'react-admin';

const ReqParticipantsEdit = () => {
  const { reqID, partID } = useParams();
  // 手动获取参与者数据
  const { data: participant, isLoading, error } = useGetOne('request_details', { id: partID });
  const [updateParticipant] = useUpdate();

  const handleSubmit = (values) => {
    // 提交时关联请求ID，更新数据
    return updateParticipant('request_details', {
      id: partID,
      data: { ...values, request_id: reqID }
    });
  };

  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>加载失败：{error.message}</div>;

  return (
    <Form initialValues={participant} onSubmit={handleSubmit}>
      <TextInput source="name" label="参与者姓名" />
      {/* 按需添加其他字段 */}
      <Toolbar>
        <SaveButton label="保存" />
      </Toolbar>
    </Form>
  );
};

方案2：适配Edit组件的参数要求 #

利用Edit组件的id属性手动指定资源ID，同时自定义重定向路径，避免默认的路由检查冲突：

import { useParams, ResourceContextProvider, Edit, SimpleForm, TextInput, SaveButton } from 'react-admin';

const ReqParticipantsEdit = () => {
  const { reqID, partID } = useParams();

  return (
    <ResourceContextProvider value="request_details">
      <Edit 
        id={partID} 
        // 更新后跳回当前请求的参与者列表
        redirect={`/requests/${reqID}/participants`}
      >
        <SimpleForm>
          <TextInput source="name" label="参与者姓名" />
          {/* 按需添加其他字段 */}
          <SaveButton />
        </SimpleForm>
      </Edit>
    </ResourceContextProvider>
  );
};

关键说明 #

• 两种方案都不需要依赖request_details资源的标准路由，完全适配你的嵌套路由结构
• 方案1适合需要高度自定义表单逻辑的场景，方案2更贴近React Admin的原生组件用法

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