javascript - 使用react-router-dom v6提交表单后如何重定向到另一个页面并传递数据？

Question

我正在尝试使用react-router-dom v6提交表单后重定向到传递数据的另一个页面。当我点击提交时，数据将被提交，应用程序将带我到“下载 PDF”页面，并且表单数据将通过注册页面到“下载 PDF”页面。

示例代码:

确认注册.js

import React, { useState } from "react";
import { Navigate } from "react-router-dom";

const ConfirmRegistration = () => {
  const [name, setName] = useState();
  const [confirm, setConfirm] = useState(false);

  const handleOnChange = (e) => {
    e.preventDefault();
    const value = e.target.value;
    setName(value);
  };
  const handleSubmit = (e) => {
    e.preventDefault();
    setConfirm(true);
    console.log(name);
  };

  if (confirm) {
    return (
      <Navigate
        to={{
          pathname: "/download-pdf",
        }}
      />
    );
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type='text'
          name='name'
          placeholder='input text here'
          onChange={handleOnChange}
        />
        <button type='submit'>Submit</button>
      </form>
    </div>
  );
};

export default ConfirmRegistration;

下载Pdf.js

import React from "react";

const DownLoadPdf = () => {
  return (
    <div>
      <p>DownLoad Pdf</p>
    </div>
  );
};

export default DownLoadPdf;

Answer 1

您可以使用 useNavigate 代替 Navigate

import React, { useState } from "react";
import { useNavigate } from "react-router-dom";

const ConfirmRegistration = () => {
  const [name, setName] = useState();
  const [confirm, setConfirm] = useState(false);
  const navigate = useNavigate();
  const handleOnChange = (e) => {
     e.preventDefault();
     const value = e.target.value;
     setName(value);
  };
  const handleSubmit = (e) => {
    e.preventDefault();
    setConfirm(true);
    console.log(name);
    navigate('/download-pdf', {state:// Your data})
  };