React Router V6重定向问题：/register路由无法跳转至根路径/

DevOps 小满

2026-7-8

React注册页面接口成功后重定向失效的解决方法

核心问题原因

你用的redirect("/")在组件的普通事件/异步逻辑里不会生效——这个API是给React Router v6的路由loader、action函数设计的，组件内部的交互逻辑得用专用的导航钩子处理。

解决步骤（React Router v6 主流场景）

1. 组件内事件/异步逻辑的处理方式

在你的Register组件中，改用useNavigate钩子实现跳转：

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

function Register() {
  // 获取导航函数
  const navigate = useNavigate();

  // 接口请求逻辑示例
  const handleRegister = async () => {
    const response = await fetch('/api/register', {
      method: 'POST',
      // 补充请求头、请求体等配置
    });

    if(response.ok){
      console.log("ok");
      // 调用navigate完成跳转
      navigate("/");
    } else {
      console.log("error");
    }
  };

  return (
    // 组件渲染内容
  );
}

2. 路由action/loader函数中的处理方式

如果你的逻辑是写在路由配置的action/loader里，确保正确导入并返回redirect：

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

// 路由action函数
async function registerAction({ request }) {
  const formData = await request.formData();
  const response = await fetch('/api/register', {
    method: 'POST',
    body: formData,
  });

  if(response.ok){
    console.log("ok");
    // 此处return redirect可被路由系统处理
    return redirect("/");
  } else {
    console.log("error");
    return { error: '注册失败' };
  }
}

// 路由配置示例
const router = createBrowserRouter([
  {
    path: '/register',
    element: <Register />,
    action: registerAction,
  },
]);