Implement BackButton in React-Admin v4

Question

Before version 4, we could create BackButton like this:

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);

How do we create BackButton in react-admin version 4 ?

Answer 1

That library was deprecated a long time ago. The natural upgrade of react-router-redux is connected-react-router. In react-admin upgrade guide for version 4 is explained how to move away from connected-react-router:

Basically, now you have to use useNavigate hook from react-router:

https://marmelab.com/react-admin/Upgrade.html#removed-connected-react-router

Plus in your case you will have to change your component to a function component first. Something like this:

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>
    );
}