reactjs - 在 react-admin 中实现后退按钮

Question

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

你能指导我实现这个吗？
我不熟悉 react-admin 路由机制。
现在我在我的 edit 中使用这个组件表格 actions Prop :

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 's goBack() function为达到这个。

例如，您的按钮组件将如下所示:

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 中使用该按钮组件.

您可以从 an example which uses react-router-redux 's push() function in a similar way from the official docs 获得帮助.