React Router v6 表单提交删除帖子后重定向不生效如何解决

你遇到的跳转失效问题核心是三个点，和你描述的异常表现完全匹配：

• history.push 方法本身在 react-router-dom v6 版本中已经被正式移除，v6 版本统一用 useNavigate 钩子提供的 navigate 方法做路由跳转，这个方法报不存在是版本迭代的正常结果，不是配置问题。
• 跳转被打断的核心原因1：你的删除确认按钮大概率放在了<form>标签内部，按钮没有显式设置type="button"，默认属性是type="submit"，点击时会触发表单原生的提交行为，直接触发当前页重载，把你写在回调里的navigate()、window.location.replace()逻辑直接从执行队列里清掉，这就是你看到页面触发重载但没跳到目标页的直接原因。
• 跳转被打断的核心原因2：删除请求发出去之后，当前帖子详情页里写在useEffect中的帖子详情拉取请求还在执行，帖子被删后详情接口返回错误状态，fetch 抛出的未捕获异常直接打断了后续的跳转逻辑，你在控制台看到的fetch相关错误就是这个未处理的异常。

按顺序改就能解决：

1. 先阻断表单默认提交行为
   两种改法选一个就行：
   • 给确认删除的按钮加上type="button"属性，让按钮点击不会触发表单提交
   • 在删除的点击回调第一行加上e.preventDefault()，手动阻止默认提交行为
     参考代码：

   // 第一种改法：改按钮属性
   <button 
     type="button" // 一定要加这个
     onClick={handleDelete}
     className="confirm-btn"
   >
     确认删除
   </button>
   
   // 第二种改法：回调里阻止默认行为
   const handleDelete = async (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault()
     // 后续逻辑
   }
   

2. 给请求逻辑加错误捕获，控制跳转时机
   必须等删除请求明确返回成功状态后再执行跳转，所有异步请求都要加catch/try catch捕获异常，不要让未处理的Promise拒绝打断后续代码执行；另外给详情页的数据拉取逻辑加中断控制，组件卸载（比如触发跳转后）自动终止未完成的请求，避免请求抛错。
   参考代码：

   import { useNavigate } from 'react-router-dom'
   
   // 组件内部初始化navigate
   const navigate = useNavigate()
   
   const handleDelete = async (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault()
     try {
       // 等待删除请求完成，确认成功再往下走
       const deleteRes = await fetch(`/api/posts/${currentPostId}`, {
         method: 'DELETE',
         headers: {
           'Content-Type': 'application/json',
           // 这里放你项目里的鉴权头等配置
         }
       })
       // 接口返回非2xx状态直接抛错，走catch分支
       if (!deleteRes.ok) throw new Error(`删除失败，状态码：${deleteRes.status}`)
       
       // 删除成功后执行跳转，用官方navigate方法即可，不用混用window.location
       // 加replace: true 不会在浏览器历史里留当前已删除帖子的记录，体验更好
       navigate('/', { replace: true })
     } catch (err) {
       console.error('删除操作异常：', err)
       // 这里可以加你的全局错误提示，比如toast提示删除失败
       // 千万不要漏了catch，不然异常会抛到外层打断执行
     }
   }
   
   // 修复帖子详情拉取逻辑的内存泄漏和异常问题
   useEffect(() => {
     // 新建中断控制器
     const abortController = new AbortController()
     const fetchPostDetail = async () => {
       try {
         const detailRes = await fetch(`/api/posts/${currentPostId}`, {
           signal: abortController.signal // 绑定中断信号
         })
         if (!detailRes.ok) throw new Error('拉取详情失败')
         const postData = await detailRes.json()
         // 这里写你更新帖子详情状态的逻辑
       } catch (err) {
         // 主动中断的请求不用打错误日志
         if ((err as Error).name !== 'AbortError') {
           console.error('拉取帖子详情异常：', err)
         }
       }
     }
   
     fetchPostDetail()
     // 组件卸载时中断未完成的请求，避免跳转后请求还在执行抛错
     return () => abortController.abort()
   }, [currentPostId])
   

3. 排查后端接口返回
   确认后端删除接口在帖子删除成功后返回2xx状态码，不要在删除成功后返回404/500等错误状态，否则前端请求会判定为失败，走到catch分支不执行跳转。

改完之后可以按以下点验证：

• 点击确认删除按钮不会触发当前页的原生刷新
• 控制台没有未捕获的fetch相关报错
• 删除请求返回成功后自动跳转到指定页面，不需要手动切换路由
• 跳转到主页后能正常看到帖子已经被移除

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