Trabajando en una funcionalidad de 'contraseña olvidada', estoy tratando de pasar los datos de correo electrónico de la 'página de inicio de sesión' a la página de 'contraseña olvidada' a través de Link.
Pero cuando intento acceder a la misma en la página 'Olvidé mi contraseña', me está dando undefined .
¿Podría por favor revisar mi sintaxis?
A continuación se muestra el fragmento de código y el código de la 'página de inicio de sesión':
<div className="forget-password-container"> <div> {" "} <Link to={{ pathname: "/forget-password", state: formData.email, }}> <u style={{ textDecoration: "underline" }}>Forgot Password</u> </Link> </div> </div>Olvidé la página de contraseña:
const ForgetPassword = (props) => { // const { email } = (props.location && props.location.state) || {}; console.log(props?.location?.state); return <div>ForgetPassword </div>; }; export default ForgetPassword;Sugiérame cómo puedo acceder a los datos de correo en la página "Olvidé mi contraseña".
Con react-router V6 puede usar el componente de salida y pasar un contexto a otra página.
<Routes> <Route path="/login" element={Login}/> <Route path="/reset-password" element={ResetPass}/> </Routes> const Login = () => { ... <Outlet context={contextdata} /> // contextdata - data to pass } const ResetPass = () => { const { contextdata } = useOutletContext<IContext>() // data from Login page ... <div>{contextdata}</div> }Eche un vistazo aquí: Pase Props to Outlet en React Router v6
el estado debe estar fuera de.
<Link to="/forget-password" state={formData.email} >