Javascript 使用Reaction Hook表单处理多个表单

在我的React应用程序中，我有一个分三步注册的过程，为了处理表单，我使用了Reaction Hook Form.Auth组件根据路由呈现特定的表单.

身份验证组件:

import { AppRoute } from "@/enums/enums.js";
import { useAppDispatch, useCallback, useLocation } from "@/hooks/hooks.js";
import { type UserSignUpBasicRequestDto } from "#/users/users.js";
import { actions as authActions } from "~/slices/auth/auth.js";

import {
  AuthLayout,
  SignInForm,
  SignUpAdditionalInfoForm,
  SignUpBasicForm,
  SignUpInterestsForm
} from "./libs/components/components.js";

const Auth: React.FC = () => {
  const dispatch = useAppDispatch();
  const { pathname } = useLocation();

  const handleSignInSubmit = useCallback((): void => {}, []);

  const handleSignUpSubmit = useCallback((): void => {}, []);

  const getLayout = (path: string): React.ReactNode => {
    switch (path) {
      case AppRoute.SIGN_IN: {
        return <SignInForm onSubmit={handleSignInSubmit} />;
      }
      case AppRoute.SIGN_UP: {
        return <SignUpBasicForm onSubmit={handleSignUpSubmit} />;
      }
      case AppRoute.SIGN_UP_ADDITIONAL_INFO: {
        return <SignUpAdditionalInfoForm onSubmit={handleSignUpSubmit} />;
      }
      case AppRoute.SIGN_UP_INTERESTS: {
        return <SignUpInterestsForm onSubmit={handleSignUpSubmit} />;
      }
    }

    return null;
  };

  return (
    <>
      <AuthLayout>{getLayout(pathname)}</AuthLayout>
    </>
  );
};

export { Auth };

我认为处理这一过程的最好方法是将每个步骤的所有数据保存在一个州中，并将它们发送到服务器.我想出了几个解决方案:

1. 在Auth组件中使用单个useForm挂钩，其中包含三个表单所需的所有数据.然而，在这种情况下，我需要将控制和错误等附加字段传递给所有这些表单，这可能会降低它的灵活性.
2. 在所有表单组件中分别调用useForm挂钩，并将数据保存在本地存储中.提交表单并处理数据后，从本地存储中删除数据.
3. 我也考虑过将数据保存在url散列中，但我认为这不是最好的主意.

哪种 Select 是最好的，有没有更好的 Select 来处理这种情况？