使用“忘記密碼”功能，我試圖通過鏈接將電子郵件資料從“登錄頁面”傳遞到“忘記密碼”頁面。
但是當我試圖在“忘記密碼”頁面中訪問相同的內容時，它給了我undefined。
你能檢查一下我的語法嗎？
下面是代碼片段和“登錄頁面”的代碼：
<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;
請向我建議如何訪問“忘記密碼”頁面上的郵件資料
uj5u.com熱心網友回復：
狀態應該是外來的。
<Link
to="/forget-password"
state={formData.email}
>
檢查此檔案
uj5u.com熱心網友回復：
使用 react-router V6，您可以使用 outlet 組件并將背景關系傳遞到另一個頁面。
<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>
}
請看這里：在 React Router v6 中將道具傳遞給插座
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/388610.html
標籤：javascript 反应
上一篇：如何等待未知呼叫者呼叫函式？