如何為 TabbedForm react-admin 創建路由

Question

我使用 Drawer 創建/顯示/編輯頁面。我有一個位於 TabbedForm 中的編輯頁面，我無法訪問所有 FormTabs。當我嘗試在第一個 FormTab 中進行編輯時，它可以工作，但另一個 FormTab 不起作用，它消失了（我猜這是因為我沒有在 Drawer 中包含第二個 FormTab，但是對於 Create 它工作正常:-D）。 總而言之，我不知道如何為第二個 FormTab 創建額外的路由。

class AdminList extends React.Component {
render() {
    const { push, classes, ...props } = this.props;
    return (
        <Fragment>
            <List
                {...props}
                sort={{ field: 'id', order: 'DESC' }}
                actions={<AdminListActions />}
            >
                <Datagrid rowClick="edit">
                    <TextField source="id" />
                    <NameField source="name" />
                    <TextField source="email" />
                    <TextField source="type" />
                    <FunctionField label="Permissions" render={record => `${(record.permissions === null) ? 'none' : objectList(record.permissions)}`} />
                    <ShowButton />
                    <EditButton />
                    <DeleteButton undoable={false} />
                </Datagrid>
            </List>
            <Route path="/admin/create">
                    {({ match }) => (
                    <Drawer
                        open={match ? true : false} 
                        anchor="right"
                        onClose={this.handleClose}
                    >
                        <AdminCreate
                            className={classes.drawerContent}
                            onCancel={this.handleClose}
                            {...props}
                        />
                    </Drawer>
                )}
            </Route>
            <Route path="/admin/:id/show">
                {({ match }) => {

                    const isMatch =
                        match &&
                        match.params &&
                        match.params.id !== 'create';

                        return (
                        <Drawer
                            open={!!isMatch}
                            anchor="right"
                            onClose={this.handleClose}
                        >
                            {isMatch ? (
                                <AdminShow
                                    className={classes.drawerContent}
                                    id={isMatch ? match.params.id : null}
                                    onCancel={this.handleClose}
                                    {...props}
                                />
                            ) : (
                                <div className={classes.drawerContent} />
                            )}
                        </Drawer>
                    );
                }}
            </Route>
            <Route path="/admin/edit/:id">
                {({ match }) => {

                    let isMatch =
                        match &&
                        match.params &&
                        (match.params.id !== 'create')
                        && match.isExact;

                    return (
                        <Drawer
                            open={(isMatch===true)}
                            anchor="right"
                            onClose={this.handleClose}
                        >
                            {isMatch ? (
                                <AdminEdit
                                    className={classes.drawerContent}
                                    id={isMatch ? match.params.id : null}
                                    onCancel={this.handleClose}
                                    {...props}
                                />
                            ) : (
                                <div className={classes.drawerContent} />
                            )}
                        </Drawer>
                    );
                }}
            </Route>

        </Fragment>
    );
}

我希望能夠從 TabbedForm 編輯所有 FormTabs（實際訪問它們）。 謝謝！ 另外，這是我的 AdminEdit 組件：

const AdminEdit = ({ onCancel, ...props }) => (
<Edit undoable={false} title=" " {...props}>
    <TabbedForm toolbar={<AdminEditToolbar onCancel={onCancel} />}>
        <FormTab label="main">
            <DisabledInput source="id" />
            <DisabledInput source="businessId" />
            <TextInput source="name" />
            <TextInput source="email" validate={required()} />
            <TextInput source="password" validate={required()} />
            <TextInput source="type" />
        </FormTab>
        <FormTab label="permissions">
            <CustomCheckbox {...props} />
        </FormTab>
    </TabbedForm>
</Edit>

Answer 1

擁有一個代碼沙盒會有所幫助，這樣我們就可以發揮這個想法。 但是，我認為這是因為您的編輯路線過於嚴格。 事實上，我們也在子路由中安裝標簽： /admin/edit/:id/:tab 。 默認情況下，每個選項卡都被簡單地分配了一個數字作為其路徑，但您可以使用其path屬性覆蓋它