React Router DOM v6.10中redirect函数编程式跳转失效问题咨询

首先明确：你在组件事件处理函数里直接调用redirect函数是无效的，因为React Router v6里的redirect和v5的用法完全不同，它并不是用来做组件内编程式跳转的工具函数。

一、redirect 函数的正确使用场景 #

v6中的redirect函数仅用于以下场景：

• 路由的loader函数：当路由加载前需要校验（比如未登录），返回redirect()让路由系统自动处理跳转
• 路由的action函数：表单提交或数据操作后，返回redirect()完成跳转
• 在路由配置的element中配合useRouteError等钩子处理错误重定向

举个loader中使用的例子：

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

export async function personLoader({ request }) {
  const user = await checkUserAuth();
  if (!user) {
    // 未登录则重定向到登录页
    return redirect('/login');
  }
  // 正常返回数据
  return fetchPersonData();
}

二、为什么你的调用无效 #

你在按钮的onClick事件里直接调用redirect('/update/${id}')，这个操作只是创建了一个重定向对象，但没有交给React Router的路由系统去处理——事件处理函数是普通的客户端交互逻辑，不会自动识别并执行这个重定向指令，所以跳转完全没反应。

三、组件内编程式跳转的正确方案 #

组件内的交互型跳转（比如按钮点击），依然要用useNavigate Hook，这是v6官方推荐的组件内编程式导航方案，你已经验证过它可以正常跳转并获取useParams参数，这就是正确的选择。

修正你的代码：

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

// 在组件内获取navigate函数
const navigate = useNavigate();

const handleEdit = (id) => {
  console.log('Edit clicked, with ID: ', id);
  navigate(`/update/${id}`); // 用navigate替代redirect
}

四、能不能继续用redirect实现组件内跳转？ #

不能。redirect函数的设计初衷就是服务于路由的加载/动作逻辑，而非组件内的客户端交互跳转。强行在组件内使用它没有任何效果，官方也没有提供这种用法的支持。

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