React-admin: Add a BackButton

[sorcer1]

Adding a BackButton to do a history.go(-1) or another way will be usefull to add it in List's actions like that :

[djhi]

Can you explain your usecase ?

[sorcer1]

I will try with the demo app : https://marmelab.com/react-admin-demo/#/reviews

In the "Reviews" list we click in a customer (reference field), so we go to the customer show view.
I want to go back to the "Reviews" with a button.
In a browser is easy, but think about some devices (without physical back buttons) or destop/tablet apps in fullscreen mode.

[djhi]

You can click the Reviews item in the menu.

We won't implement that in the core but you can create your own custom button for that by connecting it with the react router redux actions

[mnlbox]

@djhi I think it's a very popular use-case and better to support in core. :thinking:
Are you any plan to add this?

[djhi]

Nope, we won't. We had one before and we explicitly removed it. Nothing prevent you to have your own default actions that you use on all your views though

[djhi]

You can even create your own default views (Create, Edit, List, etc.) which just import/reexport the default one with your own default props

[mnlbox]

@djhi But how we can back a route?
I'm not familiar with react-admin routing mechanism.

[djhi]

Please ask this kind of questions on StackOverflow as explained in our issue template

[mnlbox]

OK man :+1:

[mnlbox]

@djhi But I think maybe it's better to add a discord chat to react-admin too. It's help community grow better and someone also can find useful note there. :wink:

[alexrosabr]

Nope, we won't. We had one before and we explicitly removed it. Nothing prevent you to have your own default actions that you use on all your views though

I think a mere history.go(-1) has problems with circular navigation. IMHO the main use case is to simply go back to the List view from Edit and Show views. The framework could add an automatic "Back" button alongside with the "Edit" button in the Show view that simply redirects to the List view. A similar approach could be used to automatically add the "Back" button in the Edit view.

[fzaninotto]

If what you need is a button that links to the List view, you can use the <ListButton>, as follows:

import { TopToolbar, ListButton, ShowButton } from 'react-admin';

const PostEditActions = ({ basePath, data }) => (
    <TopToolbar>
        <ListButton basePath={basePath} />
        <ShowButton basePath={basePath} record={data} />
    </TopToolbar>
);

export const PostEdit = (props) => (
    <Edit actions={<PostEditActions />} {...props}>
        ...
    </Edit>
);

If you want this button to look like a Back button, you can pass a custom label and icon to the ListButton:

import ChevronLeft from '@material-ui/icons/ChevronLeft';

const EditActions = ({ basePath, data }) => (
    <TopToolbar>
        <ListButton basePath={basePath} label="Back" icon={<ChevronLeft />} />
        <ShowButton basePath={basePath} record={data} />
    </TopToolbar>
);