SamwithCode

Form Action in React Router 2025

🧾 Form Action in React Router 2025

React Router 6.4+ introduced the Form Actions API to handle form submissions seamlessly using loader and action functions — no need to manage form state manually or write separate handlers.

✅ Benefits:

  • Server-style form handling in React apps
  • Improved UX with no JavaScript overhead
  • Auto-redirection & validation

🚀 Example:


// App.jsx
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
import ContactForm, { action as formAction } from "./ContactForm";

const router = createBrowserRouter([
  {
    path: "/contact",
    element: ,
    action: formAction,
  },
]);

export default function App() {
  return ;
}


// ContactForm.jsx
import { Form } from "react-router-dom";

export async function action({ request }) {
  const formData = await request.formData();
  const name = formData.get("name");
  const message = formData.get("message");
  console.log("Submitted:", name, message);
  return null;
}

export default function ContactForm() {
  return (
    

      
      
      
    

  );
}

💡 Tip:

Use `Form` from react-router-dom to automatically trigger the route's action when the form is submitted.