如何在React-Hook-Form+TypeScript中实现表单续页跳转

核心思路是追踪用户最后停留的表单页面路由，将其持久化存储，在用户重新进入表单流程时自动跳转到该路由。以下是基于你的技术栈的具体实现方案：

1. 路由追踪与持久化存储 #

在每个表单子页面组件中，当组件挂载或路由变化时，将当前路由保存到localStorage（或后端数据库，根据可靠性需求选择）。

示例（以FirmOverview组件为例，其他页面同理）：

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

const FirmOverview = () => {
  const location = useLocation();

  useEffect(() => {
    // 保存当前路由到localStorage，统一键名便于后续读取
    localStorage.setItem('lastProfileSetupRoute', location.pathname);
  }, [location.pathname]);

  // 你的react-hook-form表单逻辑...
};

如果需要更可靠的存储（避免用户清除本地存储），可以将路由信息保存到后端用户表中：

// 子页面中保存路由到后端
useEffect(() => {
  const saveLastRoute = async () => {
    await fetch('/api/user/profile-setup-last-route', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ route: location.pathname })
    });
  };
  
  saveLastRoute();
}, [location.pathname]);

2. 父路由组件实现自动重定向 #

在GeneralPartnerProfileSetup父组件中，当用户进入表单流程时，读取存储的路由并自动跳转到对应页面。

import { useEffect } from 'react';
import { useNavigate, Outlet } from 'react-router-dom';
import { PrivateRoutes } from './path-to-your-routes';

const GeneralPartnerProfileSetup = () => {
  const navigate = useNavigate();

  useEffect(() => {
    // 定义所有有效表单路由，用于校验存储的路由合法性
    const validFormRoutes = [
      PrivateRoutes.FIRM_OVERVIEW,
      PrivateRoutes.FUND_OVERVIEW,
      PrivateRoutes.PAST_PERFORMANCE,
      PrivateRoutes.INVESTMENT_TEAM,
      PrivateRoutes.FUND_DETAILS,
      PrivateRoutes.FUND_STRUCTURE,
      PrivateRoutes.REVIEW_AND_SUBMIT
    ];

    // 从localStorage读取路由（如果用后端则替换为接口请求）
    const lastRoute = localStorage.getItem('lastProfileSetupRoute');

    // 校验路由有效性并跳转
    if (lastRoute && validFormRoutes.includes(lastRoute)) {
      navigate(lastRoute);
    } else {
      // 默认跳转到第一页，确保流程正常启动
      navigate(PrivateRoutes.FIRM_OVERVIEW);
    }
  }, [navigate]);

  return <Outlet />;
};

如果用后端存储，替换为接口请求逻辑：

useEffect(() => {
  const fetchLastRoute = async () => {
    const res = await fetch('/api/user/profile-setup-last-route');
    const data = await res.json();
    const lastRoute = data.lastRoute;

    const validFormRoutes = [/* 同上 */];
    if (lastRoute && validFormRoutes.includes(lastRoute)) {
      navigate(lastRoute);
    } else {
      navigate(PrivateRoutes.FIRM_OVERVIEW);
    }
  };

  fetchLastRoute();
}, [navigate]);

3. 提交完成后清除追踪记录 #

当用户在ReviewAndSubmit页面完成表单提交后，需要清除存储的路由记录，避免下次进入表单流程时错误跳转到提交页。

import { useNavigate } from 'react-router-dom';
import { useForm } from 'react-hook-form';
import { PrivateRoutes } from './path-to-your-routes';

const ReviewAndSubmit = () => {
  const navigate = useNavigate();
  const { handleSubmit } = useForm();

  const onSubmit = async (data: FormData) => {
    // 执行表单提交逻辑
    const submitSuccess = await submitProfileData(data);

    if (submitSuccess) {
      // 清除localStorage中的路由记录（后端存储则调用接口删除）
      localStorage.removeItem('lastProfileSetupRoute');
      // 跳转到个人资料页面或其他页面
      navigate(PrivateRoutes.PROFILE_UPDATE);
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* 表单内容 */}
    </form>
  );
};

额外注意事项 #

• 确保所有表单路由都包含在validFormRoutes数组中，避免非法路由跳转。
• 如果用户手动修改URL跳转到未完成的后续页面，建议在子页面中校验前置表单是否已填写，防止跳过流程（可结合react-hook-form的表单数据状态判断）。

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