[英]React Router not rendering component on return
處理刪除有效,但在刪除項目后不會在'/'
處呈現組件。 輸入該 url 將定向到正確的組件。
我還希望handleEdit
也可以通過其鏈接(/Job/Edit#,其中 # 是 rowData.id)引用,而不是直接調用。
import {Link} from 'react-router-dom';
export default function ListJobs(props) {
const url = 'http://localhost:8000/api/Jobs/'
const [data, loading] = DataLoader(url);
const handleEdit = (e,rowData) => {
return <EditJob id={rowData.id} />
}
const handleDelete = (e,rowData) => {
//edit operation
DataDelete(url, rowData.id)
return <Link to='/' />
}
const createButton =
<div style={{display: 'flex', justifyContent:'center', alignItems:'center'}}>
<Button
component={Link} to='/Job/Create'
variant="contained"
color="primary">
Create New Job
</Button>
</div>
return (
<> {loading ? (
<Grid
container
spacing={0}
alignItems="center"
justify="center"
style={{ minHeight: '90vh' }}
>
<CircularProgress size="10vh" />
</Grid>
) : (
<MuiTable
model="Job"
data={data}
url={url}
handleEdit={handleEdit}
handleDelete={handleDelete}
createButton={createButton}
/>
)}
</>
);
}
數據刪除:
export function DataDelete(url, id) {
url = url + id + '/'
async function DeleteData() {
const options ={
method : 'DELETE',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json;charset=UTF-8'
}
}
const response = await fetch(url, options)
.then(response =>{
console.log(response.status);
});
}
if (id === undefined)
alert('Job not found.')
else
DeleteData()
alert('Job Deleted!')
在任何情況下返回Link
都不會觸發導航。 從技術上講,您可以返回Redirect ,但對於您的結構,它無濟於事,因為未呈現返回的元素。 嘗試通過將路線"/"
推送到歷史來使用歷史進行導航:
import { useHistory } from "react-router-dom";
export default function ListJobs(props) {
let history = useHistory();
// ...
const handleDelete = (e,rowData) => {
//edit operation
DataDelete(url, rowData.id)
history.push("/");
}
// ...
}
否則,如果您重構組件以根據刪除成功后設置的新狀態屬性有條件地呈現<Redirect to="/" >
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.