CRUD具有创建或编辑过程的模式，它需要React中的路由吗

Question

我必须为数据库表创建CRUD视图，但我认为没有必要分配路由，即：/表/新"；对于创建过程/表/编辑"；对于更新(编辑(过程，所以我问我是否可以用模态窗口和它们自己的API调用来处理这个过程，而不需要为两者创建一个单独的路由，这是正确的吗？

Answer 1

我使用MUI库构建了单页CRUD应用程序。下面是处理所有CRUD的单个对话框的return子句片段。Back-end由符合REST API的PHP代码处理。在这一点上不需要花哨的路线。

return (
<Dialog onClose={handleClose} open={mode !== null}>
<DialogTitle>{mode ? titles[mode] : ''}</DialogTitle>
<DialogContent>
{
mode === 'delete' ?
<DialogContentText style={{marginBottom: "1rem"}}>
Na pewno chcesz usunąć {localPlant ? `"${localPlant.namePolish} / ${localPlant.nameLatin}"` : ''}?
</DialogContentText>
:
<>
<DialogContentText style={{marginBottom: "1rem"}}>
Podaj nazwę polską i jej łaciński odpowiednik.
</DialogContentText>
<TextField
autoFocus
required
size="small"
margin="dense"
id="namePolish"
label="Nazwa polska"
value={localPlant ? localPlant.namePolish ?? '' : ''}
onChange={(event) => {
setLocalPlant({...localPlant, namePolish: event.target.value});
setError(false);
}}
/>
<TextField
style={{marginLeft: "2rem", fontStyle: "italic"}}
required
size="small"
margin="dense"
id="nameLatin"
label="Nazwa łacińska"
value={localPlant ? localPlant.nameLatin ?? '' : ''}
onChange={(event) => {setLocalPlant({...localPlant, nameLatin: event.target.value}); setError(false);}}
/>
</>
}
<Collapse in={error !== false}>
<Alert severity="error">{error}</Alert>
</Collapse>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Anuluj</Button>
{
!error && (
(mode === 'add' ? <Button onClick={handleAddPlant}>Dodaj</Button> : '') ||
(mode === 'edit' ? <Button onClick={handleEditPlant}>Zmień</Button> : '') ||
(mode === 'delete' ? <Button onClick={handleDeletePlant}>Usuń</Button> : '')
)
}
</DialogActions>
</Dialog>
);

Answer 2

是的，在不为每一个动作使用路由的情况下，使用modal执行此操作是完全可以的。这完全取决于你想如何处理它。至少我在这个过程中没有看到任何缺点。

Answer 3

这取决于用户体验。基本上，如果您只有几个字段需要创建或更新，您可以继续使用Modal。这将使用户体验变得更好。也适用于你所说的需要路线的整页编辑。你们可以用抽屉。它将使用整页，您可以在单页中维护数据，也可以编辑或创建。

无论是否为editMode，您都可以使用相同的组件来创建、编辑和传递道具。