score:1

Accepted answer

You can use useNavigate instead of using 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})
  };

score:0

You're trying to pass data between components. There are several ways as using "Redux" state management, "Context API" and etc. Then in DownLoadPdf component you manipulate the data. If the project is high-scale, prefer using a statemanagement like "Redux". But you can simply pass data by navigate as this:

navigate('/download-pdf', {state: // The Data});

score:1

You can Use Hook Provided By React Router

 import { useNavigate } from "react-router-dom";
    
 const confirmRegistration = () => {
    const navigate = useNavigate();
    const handleSubmit = (e) => {
       ...
        navigate('/route', {state: {//pdfData}})
      };
    }

Other Way : You can store Data in a Global State and use from there. Redux, ContextAPI etc


Related Query

More Query from same tag