如何在NextJS中以多步形式传递数据？

import { useState } from 'react';
import { useRouter } from 'next/router';

const Step1 = () => {
  const [name, setName] = useState('');
  const router = useRouter();

  const handleNext = () => {
    // 保存当前步骤的数据
    const data = { name };

    // 导航到下一个步骤
    router.push('/step2', undefined, { shallow: true });
  };

  return (
    <div>
      <h1>Step 1</h1>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      <button onClick={handleNext}>Next</button>
    </div>
  );
};

const Step2 = () => {
  const [email, setEmail] = useState('');
  const router = useRouter();

  const handleNext = () => {
    // 保存当前步骤的数据
    const data = { email };

    // 导航到下一个步骤
    router.push('/step3', undefined, { shallow: true });
  };

  return (
    <div>
      <h1>Step 2</h1>
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      <button onClick={handleNext}>Next</button>
    </div>
  );
};

const Step3 = () => {
  const [address, setAddress] = useState('');
  const router = useRouter();

  const handleNext = () => {
    // 保存当前步骤的数据
    const data = { address };

    // 导航到下一个步骤或提交数据
    // ...

    // 示例：展示所有步骤的数据
    const allData = {
      name: router.query.name,
      email: router.query.email,
      address,
    };
    console.log(allData);
  };

  return (
    <div>
      <h1>Step 3</h1>
      <input type="text" value={address} onChange={(e) => setAddress(e.target.value)} />
      <button onClick={handleNext}>Next</button>
    </div>
  );
};

const MultiStepForm = () => {
  const router = useRouter();

  // 根据当前路径渲染对应的步骤组件
  const renderStep = () => {
    switch (router.pathname) {
      case '/step1':
        return <Step1 />;
      case '/step2':
        return <Step2 />;
      case '/step3':
        return <Step3 />;
      default:
        return null;
    }
  };

  return <div>{renderStep()}</div>;
};

export default MultiStepForm;