Как правильно добавить компонент Aside, чтобы создать кнопку модального стиля в правой части моей страницы показа?

Question

Я создаю собственную страницу показа для индивидуального клиента. На этой странице мне нужна кнопка, которая позволяет мне редактировать значение их очков, которое они имеют. Я хочу использовать компонент aside, встроенный в реагирующий администратор, но не могу заставить его работать правильно.

Я проследовал за документацией, чтобы добавить код для компонента aside, и поместил в него свой компонент кнопки. Однако это не рендеринг на страницу вообще. Я получаю TypeError. 'TypeError: Невозможно прочитать случайный "поиск" неопределенного.'

const Aside = (...props) => {
    const { customer_id: customer_id_string } = parse(props.location.search);

    const customer_id = customer_id_string ? parseInt(customer_id_string, 10) : '';
    return (
        <div style={{ width: 200, margin: '1em'}}>
            <Button 
            defaultValue={{ customer_id }}
            redirect="show"
            component={Link}
            to={{
                pathname: '/points/{{point-id}}/create',
            }}
            label="Add Points"
            >
                <Reward>Add Points</Reward>
            </Button>
            )
        </div>
    )

};

const CustomerShow = ({ classes, record, ...props }) => (
    <Show aside={<Aside />} {...props}>
        <TabbedShowLayout>
            <Tab label="Customer Basics">

            <TextField source="firstName"  /><TextField source="lastName" />
            <TextField source="email" />            
            <BooleanField source="active" />
            </Tab>
            <Tab label="The Rest">
            <NumberField label="Points" source="points" />
            <NumberField source="usedPoints" />
            <NumberField source="expiredPoints" />
            <NumberField source="lockedPoints" />
            <BooleanField source="agreement1" />
            <BooleanField source="agreement2" />

            </Tab>

            <Tab label="Transactions" resource="transactions" >
            <ReferenceManyField
                    addLabel={false}
                    reference="transactions"
                    target="customerId"
                    pagination={<Pagination />}
                    perPage={10}
                    sort={{ field: 'createdAt', order: 'DESC' }}
                ><Datagrid rowClick="show" >
                    <DateField source="createdAt"/>
                    <TextField source="documentNumber"/>
                    <TextField source="documentType"/>
                    <NumberField source="grossValue"/>
                    <NumberField source="pointsEarned"/>
                    <NumberField source="pointsUsed"/>
                </Datagrid>
                </ReferenceManyField>
            </Tab>
            <Tab label="Points" resource="Points" >
            <ReferenceManyField
                    addLabel={false}
                    reference="points"
                    target="customerId"
                    pagination={<Pagination />}
                    perPage={10}
                    sort={{ field: 'createdAt', order: 'DESC' }}
                ><Datagrid rowClick="show" >
                    <NumberField source="valueLocked" />
                    <NumberField source="valueUsed" />
                    <NumberField source="valueRemain" />
                    <NumberField source="valueExpired" />
                    <NumberField source="valueEarned" />
                </Datagrid>
                </ReferenceManyField>
            </Tab>
        </TabbedShowLayout>


    </Show>
);

Ожидаемые результаты - кнопка в правой части страницы с надписью «Добавить баллы». Фактические результаты - либо TypeError, либо страница отображается, но кнопки нет.

Answer 1

Я понял, что я делаю неправильно.У меня не было правильно заполнено ни одного из моих источников.Это была ссылка на неверный источник.