Estoy tratando de redirigir a otra página con datos de paso después de enviar el formulario usando react-router-dom v6. Cuando haga clic en enviar, se enviarán los datos y la aplicación me llevará a la página "Descargar PDF", también los datos del formulario pasarán de la página de registro a la página "Descargar PDF".
Código de ejemplo:
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;Descargar PDF.js
import React from "react"; const DownLoadPdf = () => { return ( <div> <p>DownLoad Pdf</p> </div> ); }; export default DownLoadPdf;Puede usar el enlace proporcionado por React Router
import { useNavigate } from "react-router-dom"; const confirmRegistration = () => { const navigate = useNavigate(); const handleSubmit = (e) => { ... navigate('/route', {state: {//pdfData}}) }; }Otra forma: puede almacenar datos en un estado global y utilizarlos desde allí. Redux , ContextAPI , etc.
Puede usar useNavigate en lugar de usar 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}) };Está intentando pasar datos entre componentes. Hay varias formas de usar la administración de estado "Redux", "API de contexto", etc. Luego, en el componente DownLoadPdf , manipula los datos. Si el proyecto es de gran escala, prefiera usar una gestión de estado como "Redux". Pero simplemente puede pasar datos navigate así:
navigate('/download-pdf', {state: // The Data});