score:1
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
Source: stackoverflow.com
Related Query
- How to redirect to another page with passing data after submitting form in using react-router-dom v6?
- How do I redirect user to another page after submit the form using Reactjs?
- How can i get data or pass a data from one page to another after submitting a form in reactjs
- redirect to another page after submitting a form
- How to redirect user after submitting form with React
- ReactJS - How to redirect another page using history.push by passing data?
- How to open pop up modal when form submit sucessfully and hide pop after 2 mintues and redirect to another page in react js?
- How to redirect to another page Reactjs/nextjs sending data with post
- How to show an alert with errors found after submitting Formik form in react native
- How can I redirect all clients to another page with socket.io?
- How to pass data from a page to another page using react router
- How do I redirect user to another page after submit the form?
- how to redirect to home page after submitting redux-form?
- How to redirect user back to initially-requested page after authentication with React-Router v6?
- How to redirect to another page using history on React js?
- React Router redirect after submitting a form using the input value
- How can I on Submit my Form redirect the Results to another Page in React
- Redirect to another page after form submit
- How to create login and redirect to another page after success?
- How to redirect another page after button on click method react js
- How to validate the form and send user to another page on successful data filled in form fields in React JS?
- How could i use the routing in reactjs to redirect from one page after loading to another url
- Navigate to another page with data in a React Component after fetch
- How do I redirect after login to another page in ReactJs
- How to display the information submitted in the html form on another page using react js?
- How to redirect to another page after Stripe React successful response?
- How can i redirect after successful submit of form using react-redux
- How to redirect to a different page after authenticated with React
- React Js: How to pass table row data as props to another page using onClick event
- How to redirect to a page after login while send a token as a hander to middleware both using express
More Query from same tag
- Testing useEffect unmount callback called using acts in enzyme
- How to fix failing NextJS export - working fine locally but upon export it's failing, dismally :(
- Passing back redirect url parameters to main window after successful Paypal login in popup window
- React Suspense not working with useEffect/setTimeOut
- Using props inside render method as a condition for changing UI?
- add icon to header navBar (I am not getting that how to add icon on the most left in my NavBar)
- How to increment simple counter and counter with object component using redux
- Why am I getting error “hook cannot be called inside a callback” when setting state in React?
- React and Typescript: Convention for classes when no props are being passed
- Adding breakpoint to custom theme in Material UI Next (reactjs)
- Uncaught ReferenceError: React is not defined
- react select styles and typescript
- How can I put a div to another row?
- i want to change the selected values and also update with using select and option with using react js
- How to capture Errors in Apollo Consumer when making graphql queries
- Vue 3 get props in style
- How to pass an object through Link
- setting CSS in seperate style class not reflected in UI
- Where does prop argument come from in React?
- React Fullstack: not able to fetch item details from Rest API
- How can I replace simple text with a validated URL?
- React updating state after component has been unmounted (memory leak)
- Is there a way to get "this.lastID" from sqlite.run() callback using es6 and react classes
- How does Next JS application works on browser even without .html file in folder structure?
- Need React input box to be a floating number
- Unexpected Results Splicing on Spreaded Array
- Could we use Material Icon with PrimeReact button
- How do I use the output of one axios request as a dependency for another when rendering components in React?
- Hooks can only be called inside the body of a function component. (fb.me/react-invalid-hook-call)
- React: Passing parameters in Dumb Component Functions