문제

Radix UI에서 제공하는 Form으로 스타일링을 하고 Submit을 보내도 React Router의 action에선 받지 못한다(이뭐병). action을 이용하려면 Form을 이용해야만 한다.

같은 form element라서 될 줄 알았는데 뭔가 내부적으로 돌아가는 게 다른가 보다. 그렇다고 Radix Form과 React Router Form을 같이 쓰면 form 두 개 쓰지 말라고 뭐라뭐라 한다. 동작을 안 하기도 하고 ....

해결

• 해결 방법: form의 submit은 막고, useSubmit을 이용한다.

export const action: ActionFunction = async ({ request }) => {
  const formData: unknown = await request.formData();

  // const email = formData.get('email');
  // const password = formData.get('password');
  // const nickname = formData.get('nickname');

  // alert(new URLSearchParams(formData as Record<string, string>).toString());

  // return <Navigate to="/tutorial" replace />;
  return await new Promise((resolve) => setTimeout(() => resolve(() => console.log({formData}), 1500));
};

const RegisterPage = () => {
  const submit = useSubmit();
  
  const navigation = useNavigation();
  const isSubmitting = navigation.state === 'submitting';
  
  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    
	submit({data: "hihi"} as FormData, { method: 'post' });
  };
  
  return (
    <Form.Root onSubmit={handleSubmit}>
    </Form.Root>
};

react-router-dom에서 제공하는 Form을 사용하지 않더라도 useSubmit을 사용하면 action으로 간다. 뭔가 이런 라이브러리들은 기능 제공 훅을 진짜 잘 만드는 것 같아 ... 본받고 싶다 저 센스