React-Router中DELETE请求重定向过快问题求助

这种异步操作和路由跳转的时序问题确实挺让人挠头的，我帮你梳理几个大概率的排查方向，你可以逐一检查：

1. 确认 deletePost 函数的回调触发时机是否正确 #

首先要保证你的deletePost工具函数，是在DELETE请求完全成功响应后才调用传入的回调。比如如果用Axios的话，回调必须放在.then()的回调内部，而不是直接写在请求外面：

// 正确写法：回调在请求成功后执行
function deletePost(postId, callback) {
  axios.delete(`/api/posts/${postId}`)
    .then(() => {
      // 确认请求返回200/204后再执行回调
      callback();
    })
    .catch(err => {
      console.error('删除请求失败:', err);
      // 这里一定要处理错误，别让失败时也执行跳转
    });
}

如果你的deletePost里把回调写在了请求调用的同级（比如没包裹在.then()里），那回调会在请求发送出去的瞬间就执行，自然会提前跳转。

2. 检查Action Creator中的异步流程 #

如果你用了Redux Thunk这类中间件，要确保Action Creator里是在请求完成、状态更新后才触发跳转回调：

export const deletePost = (postId, onSuccess) => {
  return dispatch => {
    axios.delete(`/api/posts/${postId}`)
      .then(() => {
        // 先更新Redux状态（比如移除该文章）
        dispatch({ type: 'DELETE_POST', payload: postId });
        // 再执行跳转的回调
        onSuccess();
      })
      .catch(err => {
        console.error('删除操作失败:', err);
        // 可选：添加错误提示，不要直接跳转
      });
  };
};

要是你在Action Creator里没等请求完成就调用了onSuccess，那跳转还是会抢在删除完成前发生。

3. 确认组件中onDelete的跳转逻辑位置 #

在posts_show.js的删除处理函数里，必须把路由跳转放在传入的回调函数内部，而不是直接写在deletePost调用之后：

// 正确写法
handleDelete = () => {
  const { post, deletePost, history } = this.props;
  deletePost(post.id, () => {
    // 只有在删除请求完成后才跳转
    history.push('/');
  });
};

// 错误写法（很多人容易犯这个错）
handleDelete = () => {
  const { post, deletePost, history } = this.props;
  deletePost(post.id);
  history.push('/'); // 这行直接同步执行，根本不等请求完成
};

4. 排查React-Router版本的适配问题 #

如果你用的是React-Router v6，那路由跳转的方式和v5不一样：要使用useNavigate钩子代替history.push。确保你是在异步操作完成后调用navigate：

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

const PostShow = () => {
  const navigate = useNavigate();

  const handleDelete = () => {
    deletePost(post.id, () => {
      navigate('/'); // v6用这个跳转
    });
  };

  // ...其他代码
};

5. 检查是否存在未处理的请求失败场景 #

如果DELETE请求偶尔失败，但你的代码还是执行了跳转，那数据库里的文章其实还存在，之后点击该文章时就会出现id未定义的错误。所以一定要在请求的.catch()块里处理错误，比如弹出提示，不要直接跳转。

按这个顺序排查下来，应该能找到问题所在——大部分时候都是回调的位置写错了，导致跳转抢在了请求完成前执行。

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