CRUD with a modal for creation or edit process, does it need a route in React?

Question

I have to make a CRUD views for a database table, but I don't see the need of assign a route i.e.: "/table/new" for the create process or "/table/edit" for the update (edit) process, so I ask if I can handle this process with modal windows and their own API call without the need of create a single route for both, is this correct, or what are the pros/cons?

Answer 1

I built single page CRUD app using MUI library. Here's the fragment of return clause of the single dialog handling all CRUD. Back-end is handled by REST API compliant PHP code. No need for fancy routing at this point.

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