router.query 不加载参数

问题描述 投票:0回答:0

router.query 没有从 formData 获取数据

代码,页面登录.tsx

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

export default function MyForm() {
  const router = useRouter();
  const [formData, setFormData] = useState({});

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // submit the form data using formData
    console.log(formData);
    router.push('/success'); // redirect to success page
  };

  return (
    <form onSubmit={handleSubmit}>
  <label>
    Name:
    <input type="text" name="name" onChange={handleChange} />
  </label>
  <label>
    Email:
    <input type="email" name="email" onChange={handleChange} />
  </label>
  <button type="submit">Submit</button>
    </form>
  );
}

代码页成功.tsx

import { useRouter } from 'next/router';

export default  function SuccessPage() {
  const router = useRouter();
  console.log (router.query)
  const { name, email } =  router.query;

  return (
    <div>
  <h1>Thank you, {name}!</h1>
  <p>We sent a confirmation email to {email}.</p>
</div>
  );
}

它不打印电子邮件下名

谢谢

我试过在 getServerSideProps 和页面上加载,但看起来无法使用 reacdt / next.js

reactjs next.js router
© www.soinside.com 2019 - 2024. All rights reserved.