如何在反应性路由器-dom 6中从位置访问数据

Question

在使用“忘记密码”功能时，我试图通过链接将电子邮件数据从“登录页”传递到“忘记密码”页面。

但是，当我试图在“忘记密码”页面中访问相同的密码时，它给了我一个未知数。

请检查一下我的语法好吗？

下面是“登录页面”的代码片段和代码：

<div className="forget-password-container">
   <div>
       {" "}
       <Link to={{
          pathname: "/forget-password",
          state: formData.email,
       }}>
          <u style={{ textDecoration: "underline" }}>Forgot Password</u>
       </Link>
    </div>
</div>

忘记密码页：

const ForgetPassword = (props) => {
   // const { email } = (props.location && props.location.state) || {};
   console.log(props?.location?.state);
   return <div>ForgetPassword </div>;
 };
        
export default ForgetPassword;

请告诉我如何访问“忘记密码”页面上的邮件数据。

Answer 1

使用react路由器V6，您可以使用出口组件并将上下文传递给另一个页面。

 <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>
}

请看这里：反应路由器v6中道具到出口的传递

Answer 2

州应该在外面。

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

检查一下这个文件