React-Admin: Как открыть «Ящик» на той же странице / маршруте, что и «Список»?

Question

Я пытаюсь воспроизвести React-Admin DEMO с функциональностью , как работает список обзора .

Там находится List элементов, и после щелчка по строке справа появляется вид Show. Ниже обратите внимание, что мой фрагмент кода очень похож на демонстрационный пример, но Drawer не открывается, а вместо этого открывается представление Show на новой странице.

Обратите внимание на ключевое отличие : Мои List и Datagrid извлекают данные через разные resources, и я могу объединить их, используя ReferenceManyField.

. List отображает сотрудников, а Show должен отображать список расписания работника.

// I think my problem is that, this always returns "false"
const isMatch = !!(
  match &&
  match.params &&
  match.params.id !== 'create'
);

Вот мой код и спасибо за любую помощь:

class NestedTimesheetList extends React.Component {
  handleClose = () => {
    this.props.push('/timesheets');
  };

  render() {
    const { push, classes, ...props } = this.props; 

    return (
      <div className={classes.root}>
        <Route path="/timesheets/show/:id">
          {({ match }) => {
           const isMatch = !!(match && match.params && match.params.id !== 'create');
           let details = (id, basePath, record) => (
              // triggered by rowClick
              linkToRecord('/TimesheetSummary', record.id, 'show') + 
              `?employeeId=${props.id}&employeeCode=${props.record.employeeCode}`
           );

           return (
             <Fragment>
               <List
                {...props}
                className={classnames(classes.list, {[classes.listWithDrawer]: isMatch})}
                sort={{ field: "name", order: "ASC" }}
               >                
                 <ReferenceManyField 
                   {...props}
                   sort={{ field: "startTime", order: "DESC" }} 
                   reference="TimesheetSummary" 
                   source="employeeCode" 
                   target="employeeCode" 
                   label={false}
                 >                                      
                   <Datagrid rowClick={details} {...props}>
                     <TextField  
                       label="Timesheet ID"
                       source="timesheetID" 
                       sortable={false} 
                     />
                     <FunctionField 
                       label="Start Time" 
                       source="startTime"
                       render={record => `${dateFormat(record.startTime)}`} 
                       sortable={false} 
                      />                                                
                    </Datagrid>
                 </ReferenceManyField>
               </List>
               <Drawer 
                 variant="persistent" 
                 open={isMatch} 
                 anchor="right" 
                 onClose={this.handleClose}
                 classes={{ paper: classes.drawerPaper }}
               >
                 {/* To avoid any errors if the route does not match, 
                   we don't render at all the component in this case */}
                 { isMatch ? (
                    <TimesheetsummaryShow
                      {...props}
                      id={match.params.id}
                      onCancel={this.handleClose}
                    />
                  ) : null}
                </Drawer>
              </Fragment>
            );
         }}
       </Route>
     </div>
   );
}

Определение ресурса администратора для этого:

import TimesheetSummary from './timesheets/index';
<Resource name="TimesheetSummary"  {...TimesheetSummary} />

Вот индекс расписания:

import TimesheetsummaryShow  from './timesheetShow';
import  TimesheetCreate  from './TimesheetCreate';

export default {
    create: TimesheetCreate,
    show: TimesheetsummaryShow
};