在 React Router v6 中，redirect() 仅适用于服务端渲染（如 Remix）或路由配置中的 loader/action，客户端组件内应使用 useNavigate 钩子进行编程式导航。
在 react router v6 中，`redirect()` 仅适用于服务端渲染（如 remix）或路由配置中的 `loader/action`，客户端组件内应使用 `usenavigate` 钩子进行编程式导航。
React Router v6 移除了 v5 中的 history.push() 和 <Redirect> 组件，转而统一通过 useNavigate 钩子实现声明式与编程式导航。该钩子返回一个函数，调用时可跳转到指定路径，并支持参数传递、替换历史记录等高级能力。
✅ 正确用法：useNavigate 钩子
确保你在函数组件内部（且必须在 React Router 的 <Router> 上下文中）调用 useNavigate：
import { useNavigate } from 'react-router-dom';
function RegisterForm() {
const navigate = useNavigate();
const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await fetch('/api/register', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ /* form data */ })
});
if (response.ok) {
console.log('注册成功');
navigate('/'); // ✅ 正确：跳转至首页
} else {
console.error('注册失败');
// 可选：显示错误提示
}
} catch (err) {
console.error('网络异常', err);
}
};
return (
<form onSubmit={handleSubmit}>
{/* 表单字段 */}
<button type="submit">注册</button>
</form>
);
}
export default RegisterForm;⚠️ 注意事项
- useNavigate 不能在事件回调外或异步 Promise 链外部直接调用（如 fetch().then(() => navigate('/')) 是安全的，但需确保 navigate 已正确获取）；
- 不要在条件判断中直接 return redirect('/') —— 这是 v6 中 loader 函数的写法，不适用于普通组件；
- 若需「替换当前历史记录」（避免用户点击返回回到原页），可传入 { replace: true }：
navigate('/', { replace: true }); - navigate 支持相对路径（如 navigate(-1) 返回上一页）、带搜索参数的路径（如 navigate('/dashboard?tab=profile')）等灵活用法。
? 补充说明
如果你正在使用服务端路由（如 createBrowserRouter + loader），则可在 loader 中使用 redirect()，例如：
export const loader = async () => {
const res = await fetch('/api/check-auth');
if (!res.ok) throw redirect('/login');
return { user: await res.json() };
};但在纯客户端组件逻辑中，请始终优先选用 useNavigate —— 它是 React Router v6 推荐且唯一可靠的客户端重定向方式。
