Working on a 'forgot password' functionality, I am trying to pass the email data from the 'login page' to the 'forgot password' page through Link.
But when I am trying to access the same in the 'forgot password' page, it is giving me undefined.
Could you please check my syntax?
Below is the code-snippet and the code of the 'login page':
<div className="forget-password-container">
<div>
{" "}
<Link to={{
pathname: "/forget-password",
state: formData.email,
}}>
<u style={{ textDecoration: "underline" }}>Forgot Password</u>
</Link>
</div>
</div>
Forget Password Page:
const ForgetPassword = (props) => {
// const { email } = (props.location && props.location.state) || {};
console.log(props?.location?.state);
return <div>ForgetPassword </div>;
};
export default ForgetPassword;
Please suggest to me how can I access the mail data on the 'forgot password' page
With react-router V6 you can use the outlet component and pass a context to another page.
<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>
}
Please take a look here: Pass Props to Outlet in React Router v6
state should be outside to.
<Link
to="/forget-password"
state={formData.email}
>