在React-Admin V4中实施Backbutton

Question

在版本4之前，我们可以创建这样的backutton：

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


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

    render() {
        return <Button startIcon={<ArrowBack />} color="primary" onClick={this.handleClick}>Назад</Button>;
    }
}

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

我们如何在React-Admin版本4中创建Backbutton？

Answer 1

该图书馆很久以前被弃用。
react-router-redux的自然升级是connected-reactect-react-router。
在react-admin版本4的升级指南被解释了如何远离connected-reactect-reactect-router：

基本上，现在您必须使用usenavigate来自react-router的钩子：

“ nofollow noreferrer”> https://marmelab.com/reaeact-admin/upgrade.html#remed-connected-react-router

Plus在您的情况下，您必须首先将组件更改为功能组件。
这样的事情：

import React, { Component } from 'react';
import Button from '@mui/material/Button';
import ArrowBack from '@mui/icons-material/ArrowBack';
import { useNavigate } from 'react-router';


const BackButton = props => {
    const navigate = useNavigate();

    handleClick = () => {
       navigate(-1);
    };

    return (
        <Button 
            startIcon={<ArrowBack />}
            color="primary"
            onClick={handleClick}
        >
            Назад
        </Button>
    );
}