在react-admin中实现BackButton

Question

例如，当我打开需要获取资源的页面时，我需要<BackButton />在inact-admin中实现一个。showlist

你能指导我实施吗？我不熟悉react-admin路由机制。现在，我在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()功能从官方文档类似的方式。