在使用 react-router-dom v6 提交表單后，我試圖通過傳遞資料重定向到另一個頁面。當我點擊提交時，資料將被提交，應用程式將帶我到“下載 PDF”頁面，表單資料也會將注冊頁面傳遞到“下載 PDF”頁面。
示例代碼：
確認注冊.js
import React, { useState } from "react";
import { Navigate } from "react-router-dom";
const ConfirmRegistration = () => {
const [name, setName] = useState();
const [confirm, setConfirm] = useState(false);
const handleOnChange = (e) => {
e.preventDefault();
const value = e.target.value;
setName(value);
};
const handleSubmit = (e) => {
e.preventDefault();
setConfirm(true);
console.log(name);
};
if (confirm) {
return (
<Navigate
to={{
pathname: "/download-pdf",
}}
/>
);
}
return (
<div>
<form onSubmit={handleSubmit}>
<input
type='text'
name='name'
placeholder='input text here'
onChange={handleOnChange}
/>
<button type='submit'>Submit</button>
</form>
</div>
);
};
export default ConfirmRegistration;
下載PDF.js
import React from "react";
const DownLoadPdf = () => {
return (
<div>
<p>DownLoad Pdf</p>
</div>
);
};
export default DownLoadPdf;
uj5u.com熱心網友回復：
你可以使用 React Router 提供的 Hook
import { useNavigate } from "react-router-dom";
const confirmRegistration = () => {
const navigate = useNavigate();
const handleSubmit = (e) => {
...
navigate('/route', {state: {//pdfData}})
};
}
其他方式：您可以將資料存盤在全域狀態中并從那里使用。Redux , ContextAPI等
uj5u.com熱心網友回復：
您可以使用 useNavigate 而不是使用 Navigate
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
const ConfirmRegistration = () => {
const [name, setName] = useState();
const [confirm, setConfirm] = useState(false);
const navigate = useNavigate();
const handleOnChange = (e) => {
e.preventDefault();
const value = e.target.value;
setName(value);
};
const handleSubmit = (e) => {
e.preventDefault();
setConfirm(true);
console.log(name);
navigate('/download-pdf', {state:// Your data})
};
uj5u.com熱心網友回復：
您正在嘗試在組件之間傳遞資料。有幾種方法可以使用“Redux”狀態管理、“Context API”等。然后在DownLoadPdf組件中操作資料。如果專案規模很大，更喜歡使用像“Redux”這樣的狀態管理。但是您可以navigate像這樣簡單地傳遞資料：
navigate('/download-pdf', {state: // The Data});
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/420857.html
標籤：
上一篇：根據里面的內容設定td的寬度？
下一篇：Chartjs頂部的小偏移