React Admin中DeleteButton删除后跳转至已删除用户详情页求助

我之前也碰到过一模一样的坑，咱们一步步来排查解决：

1. 先给DeleteButton补上缺失的关键属性 #

你的自定义Toolbar里的DeleteButton大概率缺了resource属性——React Admin的DeleteButton需要这个属性来正确识别跳转的目标资源。试试给DeleteButton加上这个属性：

<Toolbar {...props} className={classes.toolbar}>
  <SaveButton disabled={props.pristine}/>
  <DeleteButton 
    basePath={props.basePath} 
    undoable={false} 
    redirect="list"
    resource={props.resource} // 补上这个属性
  />
</Toolbar>

2. 自定义删除成功后的跳转逻辑 #

如果上面的方法没起效，咱们直接手动控制跳转行为，彻底绕过默认逻辑。在你的InternalUserEditToolbar组件里添加自定义的成功回调：

import { useNavigate } from 'react-router-dom';
import { Toolbar, SaveButton, DeleteButton } from 'react-admin';

const InternalUserEditToolbar = (props) => {
  const navigate = useNavigate();
  
  // 自定义删除成功后的跳转
  const handleDeleteDone = () => {
    // 直接跳转到用户列表页，替换成你的资源名称
    navigate(`/${props.resource}`);
  };

  return (
    <Toolbar {...props} className={props.classes.toolbar}>
      <SaveButton disabled={props.pristine}/>
      <DeleteButton 
        basePath={props.basePath} 
        undoable={false}
        onSuccess={handleDeleteDone} // 绑定自定义回调
      />
    </Toolbar>
  );
};

3. 直接覆盖Edit组件的删除成功行为 #

要是DeleteButton的设置还是没生效，那可能是Edit组件本身的默认逻辑在搞事情——有些React Admin版本里，即使你设了undoable={false}，Edit组件删除后还是会默认跳转到Show视图。这时候咱们直接在Edit组件上覆盖这个行为：

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

const InternalUserEdit = (props) => {
  const navigate = useNavigate();
  
  const handleDeleteSuccess = () => {
    // 强制跳转到用户列表页
    navigate('/internal-users'); // 替换成你的资源路径
  };

  return (
    <Edit {...props} undoable={false} onDeleteSuccess={handleDeleteSuccess}>
      <SimpleForm toolbar={<InternalUserEditToolbar />} validate={handleValidate} >
        <InternalUserForm />
      </SimpleForm>
    </Edit>
  );
};

为啥会出现这个问题？ #

说白了就是自定义Toolbar的时候，没把Edit组件传递过来的resource这类关键属性完整传给DeleteButton，导致React Admin找不到正确的跳转目标。另外部分版本的React Admin里，Edit组件的默认删除成功行为就是跳Show视图，咱们得手动把这个逻辑换掉才行。

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