React Router v6子路由Action异常：登录注册路由触发同一Action

核心问题 #

你在根布局的子路由里配置了两个完全相同的路径（空字符串""），React Router的路由匹配逻辑是从上到下优先匹配第一个符合条件的路由，所以不管你访问的是登录还是注册页面，实际生效的都是第一个子路由（对应Login组件的loginRequest），提交表单时自然只会触发同一个Action。

修复步骤 #

1. 修改路由配置，给登录/注册设置唯一路径 #

将两个子路由的path分别改为"login"和"register"，确保路由规则不冲突：

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    errorElement: <ErrorPage />,
    children: [
      {
        path:"login", // 登录页路径
        element: <Login />,
        action: loginRequest,
      },
      {
        path: "register", // 注册页路径
        element: <Register />,
        action:  registerAction,
      },
    ]
  },{
    path:"/index",
    element: <Simplejs />,
    errorElement: <ErrorPage />,
    loader: isAuthLoader,
    children: []
  }
], {basename: "/"});

2. 调整表单提交目标（按需操作） #

• 如果用了React Router的<Form>组件：无需手动修改，它会自动匹配当前路由对应的Action；
• 如果用原生<form>标签：需要将action属性设置为对应路径，比如登录表单写action="/login"，注册表单写action="/register"。

3. （可选）设置根路径默认跳转 #

如果希望访问根路径/时自动跳转到登录页，可以添加重定向路由：

// 先导入Navigate组件
import { Navigate } from "react-router-dom";

// 在children数组最上方添加重定向规则
children: [
  {
    path:"",
    element: <Navigate to="/login" replace />,
  },
  // 登录、注册路由...
]

验证效果 #

修改完成后，访问/login会渲染登录组件，提交表单触发loginRequest；访问/register渲染注册组件，提交触发registerAction，两个Action将各自独立生效。

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