ReactJS中Delete请求内使用Navigate跳转失效问题求助

以下是针对你代码问题的排查和修复步骤：

• 先确认删除请求是否真的成功执行
  你的代码里axios.delete(url)的url仅使用了API_URL，没有拼接要删除的_id，这会导致请求可能无法正确命中目标资源，甚至直接失败进入catch块，自然不会执行跳转逻辑。先检查控制台是否打印了Deleted post with ID ${_id}：

  • 如果没打印，说明请求失败，先修正API地址：

    const url = `${API_URL}/${_id}`;
    

• 检查navigate的使用是否符合React Router规则
  如果你用的是React Router v6+，navigate必须通过useNavigate钩子在函数组件内部获取，或者作为参数传递给外部函数：

  • 组件内直接定义函数的正确写法：

    import { useNavigate } from 'react-router-dom';
    
    function YourComponent() {
      const navigate = useNavigate();
    
      const deleteClick = async (_id) => {
        try {
          const url = `${API_URL}/${_id}`;
          await axios.delete(url);
          console.log(`Deleted post with ID ${_id}`);
          navigate('/');
        } catch (error) {
          console.error('Error deleting blog:', error);
        }
      };
    
      // 组件渲染逻辑...
    }
    

  • 如果deleteClick是组件外的工具函数，需要把navigate作为参数传入：

    const deleteClick = async (_id, navigate) => {
      try {
        const url = `${API_URL}/${_id}`;
        await axios.delete(url);
        console.log(`Deleted post with ID ${_id}`);
        navigate('/');
      } catch (error) {
        console.error('Error deleting blog:', error);
      }
    };
    
    // 组件内调用时传入navigate
    deleteClick(postId, navigate);
    

• 验证路由配置是否正确
  确保路由配置中存在path="/"的有效路由，比如：

  import { Routes, Route } from 'react-router-dom';
  
  function App() {
    return (
      <Routes>
        <Route path="/" element={<HomePage />} />
        {/* 其他路由... */}
      </Routes>
    );
  }
  

  若/对应的组件未正确配置，跳转后可能无视觉变化，但控制台不会报错。

• 排查是否存在阻止默认行为的代码
  如果deleteClick绑定在点击事件上，检查是否调用了event.preventDefault()，这会阻止路由跳转的默认行为：

  // 错误示例：不要随意阻止默认行为
  const handleDelete = (e, _id) => {
    e.preventDefault();
    deleteClick(_id);
  };
  
  // 正确做法：移除不必要的e.preventDefault()
  

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