react router dom v6 + react hook form BOOM

[tastafur]

If you want to use the full power of react router dom, react router dom will control the form and submit, so it will share responsibility with react form hook and this leads to inefficiencies and problems. It cannot be that the most powerful routing library and the most powerful form control and validation library do not have any type of integration for v6 of react router and thus the two libraries can work together in optimal conditions. The two development teams behind these marvelous libraries should be talked about and that react router dom encourages integration with third parties so that their system works well.

remix-run/react-router#10080
remix-run/react-router#10079

[leapful]

@tastafur

Could you please describe more details what you want achieve with react router v6 and react-hook-form ? A codesandbox to show the problem will be helpful.

Since routing library and form library are solving different use case, it always depends on developer logic implementation, not the libraries itself.

[tastafur]

These weeks that I am implementing this part I will give you an example of how both react-router-dom controls the form due to its evolution in version 6 and you, which is logical, control the form and this in turn creates an overlap of shared responsibility and Its drawbacks for the implementation of the form control

[craigmcc]

Personally, I think v6 of react-router is reaching way beyond the original purpose of managing "routing", trying to be something like react-query and redux as well.

When I upgraded to v6, I just kept using it to manage routing, and kept all my forms stuff in RHF instead of trying to migrate to v6.

[tastafur]

As you say, its responsibility has increased and it no longer focuses only on routing, it tries to manage the effects of the application, synchronizing the load through actions linked to the form, but at the same time it takes responsibility for the form control, what a good use that can provide libraries such as react hook form + yup, so it gives you a handling of load flows + actions but at the same time breaks control of the forms. As I am setting up a new project with version 6, I like the flow controls but the form validations are loaded, let's see if I can somehow use the two positive things that react router v6 and react form hook give but I see it difficult, because the problem is that both use the submit function

[hungify2022]

Any updates
I have a problem with it. I don't know how to make these work together

import { useForm } from "react-hook-form";
import {
  Form,
  redirect,
  useFormAction,
  useLoaderData,
  useNavigate,
  useSubmit,
} from "react-router-dom";
import { createContact } from "../../contacts";

export async function newContactAction({ request, params }) {
  const formData = await request.formData();
  const data = Object.fromEntries(formData);
  console.log("🚀 :: file: new.jsx:15 :: data:", data);
  const newContact = await createContact(data);
  return redirect(`/contacts/${newContact.id}`);
}

export default function NewContact() {
  const contact = useLoaderData();
  const navigate = useNavigate();
  const submit = useSubmit();

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const onSubmit = (data, e) => {
    submit(e.currentTarget, {
      data,
    });
  };

  return (
    <Form
      action="/contacts/new"
      method="post"
      id="contact-form"
      onSubmit={handleSubmit(onSubmit)}
    >
      <div>
        <span>Name</span>
        <div className="group-item">
          <div>
            <input
              placeholder="First"
              aria-label="First name"
              type="text"
              name="first"
              {...register("first", {
                required: "This field is required",
              })}
            />
            {errors.first && (
              <p role="alert" className="error">
                {errors.first?.message}
              </p>
            )}
          </div>
        </div>
      </div>
      <div>
        <button type="submit">Save</button>
        <button
          type="button"
          onClick={() => {
            navigate(-1);
          }}
        >
          Cancel
        </button>
      </div>
    </Form>
  );
}

[hungify2022]

I use manual validation by trigger but how can I prevent action if it is not valid?

[hungify2022]

I use manual validation by trigger but how can I prevent action if it is not valid?

trigger returns a promise that resolves to true if it is invalid. So you can await it and skip calling submit if it is invalid.

Nice ❤️

To achieve that let's update like below

Use native form instead of Form

<form
      id="contact-form"
      onSubmit={(e) => onSubmit(e)}
    >

use useSubmit equivalent to

<Form
      action="/contacts/new"
      method="post"
      id="contact-form"
      onSubmit={(e) => onSubmit(e)}
    >

const submit = useSubmit();

const onSubmit = async (e) => {
    const isValid = await trigger();
    e.preventDefault();
    if (isValid) {
      const values = getValues(); // `getValues`  from `useForm`
      submit(values, {
        action: "/contacts/new",
        method: "post",
      });
    }
  };

[pincoin]

@hungify2022
I wrote my code with<Form> but it works fine.

    <Form
          method="post"
          onSubmit={formSubmitHandler}
          className="flex-1 flex flex-col gap-y-4"
        > 

  const formSubmitHandler = async (event) => {
    event.preventDefault();

    if (isValid) {
      submit(event.currentTarget);
    }

    // if invalid, show all errors.
    await trigger();
  };

formState.isSubmitting doesn't work. so, I used navigation.state from react-router-dom.

  const navigation = useNavigation();
  const isSubmitting = navigation.state === 'submitting';

I believe that it will be good if react-router-dom is in charge of form action, and react-hook-form is in charge of validation.

[Vinorcola]

I have solved the issue by using a custom Form component:

import { zodResolver } from "@hookform/resolvers/zod"
import { ReactNode } from "react"
import { FieldErrors, UseFormRegister, useForm } from "react-hook-form"
import { useSubmit } from "react-router-dom"
import { ZodType, z } from "zod"

interface Props<Validator extends ZodType<any, any, any>> {
    validator: Validator
    children: (register: UseFormRegister<z.infer<Validator>>, errors: FieldErrors<z.infer<Validator>>) => ReactNode
}

export default function Form<Validator extends ZodType<any, any, any>>(props: Props<Validator>) {
    const submit = useSubmit()
    const {
        register,
        handleSubmit,
        formState: { errors },
    } = useForm<z.infer<Validator>>({ resolver: zodResolver(props.validator) })

    return (
        <form
            method="post"
            onSubmit={(event) => {
                const target = event.currentTarget
                handleSubmit(() => {
                    submit(target, { method: "post" })
                })(event)
            }}
        >
            {props.children(register, errors)}
        </form>
    )
}

This component can be used like this:

import clsx from "clsx"
import { redirect, ActionFunctionArgs, useNavigation } from "react-router"
import { ulid } from "ulid"
import { z } from "zod"

import Form from "./Form"

const validation = z.object({
    firstName: z.string().trim().nonempty(),
    lastName: z.string().trim().nonempty(),
})

type FormData = z.infer<typeof validation>

export async function action({ request }: ActionFunctionArgs) {
    const formData = Object.fromEntries(await request.formData()) as FormData
    const id = ulid()

    // Register logic here

    return redirect(`../${id}`)
}

export default function Add() {
    const { state } = useNavigation()

    return (
        <Form validator={validation}>
            {(register, errors) => (
                <>
                    <label className="label" htmlFor="firstName">
                        <span className="label-text">First name</span>
                    </label>
                    {errors.firstName && <p className="text-sm italic text-error">{errors.firstName.message}</p>}
                    <input
                        id="firstName"
                        {...register("firstName")}
                        type="text"
                        className={clsx("input input-bordered", {
                            "input-error": !!errors.firstName,
                        })}
                    />

                    <label className="label" htmlFor="lastName">
                        <span className="label-text">Last name</span>
                    </label>
                    {errors.lastName && <p className="text-sm italic text-error">{errors.lastName.message}</p>}
                    <input
                        id="lastName"
                        {...register("lastName")}
                        type="text"
                        className={clsx("input input-bordered", {
                            "input-error": !!errors.lastName,
                        })}
                    />

                    <button type="submit" className="btn btn-primary" disabled={state === "submitting"}>
                        {state === "submitting" && <span className="loading loading-spinner loading-sm" />}
                        Save
                    </button>
                </>
            )}
        </Form>
    )
}

[le-huy-jh]

It's definitely terrible in v6. Why react router want to become a form library?

[jordiyapz]

If you have used Remix, you will know why. It provides seamless integration of server action and Form data that works even without Javascript.

[wassupduck]

import { useForm } from "react-hook-form";
import { useSubmit } from "react-router-dom";

export async function action({ request }) {
  const data = await request.json();
}

export default function App() {
  const { register, handleSubmit } = useForm();
  const submit = useSubmit();

  const onSubmit = (data) => {
    submit(data, {
      method: "post",
      action: "/",
      encType: "application/json",
    });
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("example")} />
      <input type="submit" />
    </form>
  );
}

[KoenCuijp]

@wassupduck This seems like a pretty clean way to tie both frameworks together! I googled quite a bit and didn't find any well documented solutions.

I think your approach deserves some more context, as I personally had to crack my brain a bit on how your approach works (I haven't been using react for very long).

I'll try to write down some explanatory context for other people visiting this page. Please correct me on the parts where I'm wrong @wassupduck

How did we end up here?

• We are using React Router v6 and specifically its loader and action features for parallelized data fetching while routing
• But the action feature relies on using React Router Forms and we want to use React Hook Forms
  
• We want to use React Hook Forms because it has more advanced validation functionality for example
• So now we're looking for a way to use both React Router v6 and React Hook Forms together

How your approach works

1. You define your form with the standard React Hook Forms functionality (UseForm, handleSubmit & register)
2. In the function passed to HandleSubmit, you call the submit function provided by useSubmit. This makes sure that the action feature is being called (see "How did we end up here"),
3. In the React Router, you map a function to the action key. You need to map this function to the action key in the route used in the submit function of step 2. You need to do that as you're telling React Router that a submit was done to that specific route, so it will want to trigger the action function of that route.
4. The action function needs to accept a {request} parameter, and using request.json() you can get access to the data that was originally filled in in the form created with React Hook Form

I believe that's the gist of it. Might be obvious to some, but took me some time to figure it out. Hope this helps others!

[claesnn]

A simplified version (with a pleased TypeScript):

import { FieldValues, useForm } from "react-hook-form";
import { useSubmit } from "react-router-dom";

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

export default function App() {
  const { register, handleSubmit } = useForm();
  const submit = useSubmit();

  const onSubmit = (data: FieldValues) => submit(data, { method: "post" });
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("example")} />
      <input type="submit" />
    </form>
  );
}

[jeff-jointgoals]

My data is nested, for example, a person reference to a household, so I have registered fields such as

id (hidden)
firstName

but also

household.id (also hidden)

If I do a straight

const fetcher = useFetcher();
const onSubmit = async (data) => {
  fetcher.submit(data, { method: 'POST' });
};

the formData in the action contains:

household : "[object Object]"

to pass the entire nested data, I need to:

const fetcher = useFetcher();
const onSubmit = async (data) => {
  fetcher.submit(data, { method: 'POST', encType: "application/json" });
};

and in the action

const data = await request.json();

Also, useActionData will not work! It is tied to the form submit, our form submit just resubmitted it differently via the onSubmit. To access the results of the action, you will need to:

useEffect(() => {
    //do the old ActionData stuff here
}, [fetcher.data]);

---

Edit1 : formatting
Edit2: actionData changes
Edit3: cleaned up onSubmit

[smisyuk4]

Hi to all. I'm working on a project using firebase and its methods of interacting with the database, so my form may differ from others.

import { Form, useSubmit } from "react-router-dom";

  const submit = useSubmit();

  const onSubmit = async (data) => {
    submit(
      { ...data, intent: id ? "change" : "add" },
      { method: "post"}
    );
  };

 <Form onSubmit={handleSubmit(onSubmit)}>
        <input
          register={register}
          name="name"
          type="text"
        />

        <button> send </button>
      </Form>

if i have validation errors then the submit function doesn't run

export const actionChild = async ({ params, request }) => {
  const formData = await request.formData();
  const { intent, ...data } = Object.fromEntries(formData);

  if (intent === "add") {
    const childData = {
      ...data,
      childId,
    };

    const result = await addChildProfile(adultId, childData);

    if (result?.status) {
      return redirect(`/adult/children/${childId}`);
    }
  }

  if (intent === "change") {
    const childData = {
      ...data,
      childId: params.id,
    };

    const result = await updateChildProfile(adultId, childData);

    return { result: "success" };
  }
};