Lo que estoy tratando de hacer: tengo un formulario que un cliente está llenando. Ellos eligen el día y la hora de una cita antes de pagar la cita. Durante el pago, son redirigidos a una página de pago alojada y luego regresan para completar el proceso. Cuando se redirige, hay información de CC en la ruta. Estoy tratando de usar Params para obtener esa información y luego redirigir a la página en la que estaban. Parte de los parámetros me dice que su pago fue aprobado y es todo lo que necesito. Necesito establecer el estado en aprobado en base a esto. Luego use ese estado en mi página de cita, complete el formulario y envíelo, volviendo a establecer el estado en falso cuando termine.
Código actual:
const location = useLocation(); let navigate = useNavigate(); const params = new URLSearchParams(location.search); <Route path='/confirm' element={ params.has('ssl_approval_code') ? ( navigate('./appointments', { approved: true }) ) : ( <div style={{ height: '1000px' }}> Error occurred while processing card. Please use a different card or contact client. </div> ) } /> <Route exact path='/appointments' element={ <Appointment navigate={navigate} /> } /> Luego, tratando de hacer esto al final de mi función de envío, navigate({ approved: false });
Actualmente mi navegador no funciona en absoluto. Antes tenía la versión 5 de react-router-dom usando Redirect, pero el estado estaba estropeado. Pero en ese momento al menos estaba redirigiendo. Simplemente no restablecería el estado, así que cambié a la versión 6 con useNavigate.
En react-router-dom v6, el estado se envía en el objeto de options en el segundo argumento para navigate .
declare function useNavigate(): NavigateFunction; interface NavigateFunction { ( to: To, options?: { replace?: boolean; state?: any } ): void; (delta: number): void; }
Mueva el objeto a la propiedad de state del objeto de options .
navigate('./appointments', { state: { approved: false } });