时间戳

首页 > 解决方案 > React Router 在返回时不渲染组件

javascript - React Router 在返回时不渲染组件

问题描述

删除项目后处理删除工作但不呈现组件'/' 。输入该 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!')

标签： javascriptreactjsreact-router

解决方案

在任何情况下返回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="/" >根据删除成功后设置的新状态属性有条件地呈现。

推荐阅读