React Router中Form组件与action函数未触发表单提交问题排查

尝试使用React Router的Form组件配合action函数，但action函数未被调用，控制台无任何报错。已按文档实现路由、导出action并在Router中配置，以下是可能的原因及排查方向：

登录组件代码 #

import React from 'react';
import { Form } from 'react-router-dom';

export async function action({ request }) {
  console.log(request);
  const data = await request.formData();

  const formSubmission = {
    email: data.get('email'),
    password: data.get('password'),
  };

  console.log(formSubmission);
}

const AdminLogin = () => {
  return (
    <div>
      <Form>
        <input
          type="text"
          placeholder="Enter email or User ID"
          name="email"
          autoComplete="username"
        />

        <input
          type="password"
          placeholder="Enter Password"
          name="password"
          autoComplete="current-password"
        />
        <button>Log In</button>
      </Form>
    </div>
  );
};

export default AdminLogin;

路由组件代码 #

import {
  Route,
  createBrowserRouter,
  createRoutesFromElements,
  RouterProvider,
  redirect
} from "react-router-dom";
import { Home, MainNav } from './Assets/User components/UserImports';
import './Assets/User components/StyledComponents/style.css';
import LogIn, { action as userAction } from "./Assets/User components/LogIn";
import Dashboard from "./Assets/Admin components/Dashboard";
import AdminLayout from "./Assets/Admin components/AdminLayout";
import EditDeals from "./Assets/Admin components/EditDeals";
import { loader } from "./Assets/User components/Deals";
import AdminLogin, { action } from "./Assets/Admin components/AdminLogin";

function App() {
  const takeRouter = createBrowserRouter(createRoutesFromElements(
    <>
      <Route path="*" element={<code>404 Not Found</code>} />
      <Route path="/" element={<MainNav />}>
        <Route path="adminlogin" action={action} element={<AdminLogin />} />
        <Route index element={<Home />} loader={loader} errorElement={<h1>Oh! there was an error!</h1>} />
        <Route path="login" action={userAction} element={<LogIn />} />
      </Route>
      <Route path="admin" element={<AdminLayout />} loader={async () => {
        const loggedIn = false;
        return loggedIn === false ? redirect('/adminlogin') : null;
      }}>
        <Route index element={<Dashboard />} />
        <Route path="editdeals" element={<EditDeals />} />
      </Route>
    </>
  ));

  return (
    <>
      <div className="app">
        <RouterProvider router={takeRouter} />
      </div>
    </>
  );
}

export default App;

可能的原因及排查步骤 #

• 父路由未渲染<Outlet />：MainNav作为父路由的渲染组件，必须包含react-router-dom提供的<Outlet />，否则子路由的内容无法正确挂载，路由的action也无法关联到Form的提交逻辑。检查MainNav组件是否引入并渲染了<Outlet />。
• 提交按钮未显式设置type="submit"：虽然HTML规范中form内的button默认类型为submit，但显式添加type="submit"可以避免潜在的兼容性问题或意外行为，修改按钮为<button type="submit">Log In</button>。
• React Router版本过低：确保使用的是v6.4及以上版本，Data Router特性（包括action属性和<Form>组件的自动提交绑定）仅在该版本之后支持。
• 路由action绑定错误：确认从AdminLogin导入的action函数没有被其他同名变量覆盖，检查导入语句是否正确。
• action函数缺少返回值：尝试在action函数末尾添加return null;，虽然React Router允许无返回值，但某些情况下返回响应对象或null可以确保函数被正确执行。

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