How to access data from location in react-router-dom 6

Question

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

Does this answer your question? [How do I pass state through React\_router?](https://stackoverflow.com/questions/41466055/how-do-i-pass-state-through-react-router) — 0x1C1B, Dec 21 '21 at 13:52
I fixed the code-section and some spelling issues - I also think you meant _'forgot password'_, not _'forget password'_ - which would be quite detremental.. ;) — iLuvLogix, Dec 21 '21 at 14:42

Ar26 · Answer 1 · 2021-12-21T14:39:40.233

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

score 0 · Answer 2 · answered Dec 21 '21 at 14:30

0

state should be outside to.

<Link
  to="/forget-password"
  state={formData.email}
>

Check this for docs

answered Dec 21 '21 at 14:30

Timsib Adnap

54
1
6

this is not working – abdul qureshi Dec 21 '21 at 14:34
any specific errors? – Timsib Adnap Dec 21 '21 at 17:10

How to access data from location in react-router-dom 6

2 Answers2