期望一个赋值或函数调用，而是看到一个表达式反应路由器

Question

我在材料表中有按钮。我正在使用反应路由器将页面路由到不同的 URL。 这个页面应该设置功能并调用材料表<MuiTable>，然后在材料表下方渲染一个按钮。由于 MuiTable 元素的可重用性，它是这样设置的。

export default function ListJobs(props) {

  const url = 'http://localhost:8000/api/Jobs/'
  const [data, loading] = DataLoader(url);
  const handleEdit = (e,rowData) => {
    <EditJob id={rowData.id} />
  }
  const handleDelete = (e,rowData) => {
    //edit operation
    <ListJobs />
    DataDelete(url, rowData.id)

  }
  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}
        />
    )}
    </>
    );
}

这当前在调用 <EditJob...> 和 <ListJobs> 的行上抛出错误“期望赋值或函数调用，而是看到一个表达式”。我知道这不是写这个的正确方法，但是我想把它改成使用反应路由器。我已经设置了路由器，但不知道在这种情况下如何使用它们。我希望它能够像这样工作。

const handleEdit = (e,rowData) => {
    <component ={Link} to='Jobs' />
  }

我知道这不正确，因为 react 路由器链接必须位于组件内部，例如 a<button> 或 <MenuItem>。

Answer 1

尝试返回 EditJob 和 ListJobs

const handleEdit = (e,rowData) => {
    return <EditJob id={rowData.id} /> // return the function <EditJob />
}
const handleDelete = (e,rowData) => {
    //edit operation
    DataDelete(url, rowData.id) // Any operation before the return
    return <ListJobs /> // return the function <ListJobs />
}