How to redirect to another page with passing data after submitting form in using react-router-dom v6?

Question

I'm trying to redirect to another page with passing data after submitting form in using react-router-dom v6. When I will click on submit, data will be submited and the application will take me to the "Download PDF" page, also the form data will pass registration page to the "Download PDF" page.

Example Code:

ConfirmRegistration.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;

DownLoadPdf.js

import React from "react";

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

export default DownLoadPdf;

score 3 · Accepted Answer · answered Jan 25 '22 at 11:53

3

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})
  };

answered Jan 25 '22 at 11:53

hassanqshi

353
2
9

I have one query, After this, How can we retrieve the data from the state in the navigated component? For example: suppose we are sending the state of the variable name "senddata" into the component "download-pdf" then how can we retrieve that state in "download-pdf" component. – Samriddha Bajpai May 05 '22 at 12:24
you can use useLocation in download-pdf – hassanqshi May 06 '22 at 09:56
Thanks, i have done the some using useLocation – Samriddha Bajpai May 06 '22 at 11:46

score 1 · Answer 2 · answered Jan 25 '22 at 12:00

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

score 0 · Answer 3 · answered Jan 25 '22 at 11:55

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});

How to redirect to another page with passing data after submitting form in using react-router-dom v6?

3 Answers3