reactjs - 在 react-admin 中实现 BackButton

Question

我需要<BackButton />在react-admin中实现一个，例如，当我打开show需要能够返回该list页面的资源的页面时。

你能指导我实现这个吗？我不熟悉 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>
);

标签： reactjsreduxreact-routermaterial-uireact-admin

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-reduxpush()获得帮助。