внедрить BackButton в реагирующем админе

Question

Мне нужно реализовать <BackButton /> в реагировать-admin , например, когда я открываю страницу show для ресурса, который мне нужно вернуться на страницу list.

Можете ли вы помочь мне реализовать это?Я не знаком с механизмом маршрутизации реакции-администратора.Сейчас я использую этот компонент в моей edit форме actions реквизитах:

const MyActions = ({ basePath, data, resource }) => (
    <CardActions>
        <ShowButton basePath={basePath} record={data} />
        <CloneButton basePath={basePath} record={data} />
        {/* Need <BackButton /> here */}
    </CardActions>
);

export const BookEdit = (props) => (
    <Edit actions={<MyActions />} {...props}>
        <SimpleForm>
            ...
        </SimpleForm>
    </Edit>
);

Answer 1

Вы можете использовать функцию react-router-redux goBack() .

Например, ваш компонент кнопки будет выглядеть примерно так:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import Button from '@material-ui/core/Button';
import { goBack } from 'react-router-redux';

class BackButton extends Component {
    handleClick = () => {
        this.props.goBack();
    };

    render() {
        return <Button variant="contained" color="primary" onClick={this.handleClick}>Go Back</Button>;
    }
}

export default connect(null, {
    goBack,
})(BackButton);

Теперь используйте этот компонент кнопки в вашем CardActions.

Вы можете получить помощь в примере, который использует функцию react-router-redux push() аналогично официальным документам .