我已經嘗試對此代碼片段進行大量小的更改（額外的花括號，在 Link 組件代碼中將 ':' 更改為 '='，但仍然 location.state 為 null 在我試圖傳遞的 ReportEdit 組件上這不是在 React Router Dom 6.2.1 中可以實作的嗎？
這是代碼
繪制鏈接的組件
<Link
to={`/report/${report.id}/edit`}
state={{hi: "hi"}}>
<Button>
Edit
</Button>
</Link>
我想將狀態傳遞給的鏈接組件
import { Form, Button } from 'react-bootstrap'
import { Link, useParams, useLocation } from 'react-router-dom'
import axios from 'axios';
const ReportEdit = props => {
const [report, setReport] = useState([]);
const [ rep_type, setRepType ] = useState(report.rep_type);
const [ rep_count, setRepCount ] = useState(report.rep_count);
let params = useParams()
const location = useLocation()
console.log(location.state) // <--- always 'null'
const id = params.id
//async function handleSubmit() {
//let data = await axios.put(`http://localhost:3001/reports/${id}`)
// if (data) {
// console.log(data.data.report)
//}
//}
return (
<div>
<Form onSubmit={e => handleSubmit(e)}>
<Form.Group className="mb-1" controlId="rep_type">
<Form.Control
type="text"
placeholder={props.rep_type}
name="rep_type"
value={rep_type}
onChange={e => setRepType(e.target.value)}
/>
</Form.Group>
<Form.Group className="mb-1" controlId="rep_count">
<Form.Control
type="number"
placeholder={props.rep_count}
name="rep_count"
value={rep_count}
onChange={e => setRepCount(e.target.value)}
/>
</Form.Group>
<Button variant="primary" type="submit">Submit</Button>
</Form>
</div>
)
}
export default ReportEdit;
uj5u.com熱心網友回復：
可以參考react-router-dom官方檔案，可以通過object傳遞params，例如：
<Link
to={{
pathname: `/report/${report.id}/edit`,
state: { id: report.id }
}}
/>
uj5u.com熱心網友回復：
我想到了。
我只是在開發中重繪 目標頁面，實際上我需要使用鏈接通過狀態傳遞道具。fml。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/422161.html
標籤：