React-admin: Allow custom redirection on Form submission

[tomaszmadeyski]

Currently, according to doc only edit, list, show and false are possible values of redirect attribute while submitting the form.

Adding possibility to pass callback function as an argument would be a great improvement.

Using your demo https://marmelab.com/admin-on-rest-demo/ as an example:

What you were expecting:
When I'm going for a Poster Edit and opening Review edit from Reviews tab and submiting form I'm being redirected to Reviews list

What happened instead:
Instead of being redirected to Reviews list I would like to be redirected back to Poster Edit form

I believe that allowing a callback (which in this case would be navigating back in history) would solve this issue

[afilp]

Maybe my question that I just added here on Stack Overflow would be solved if I had the callback? (not sure about it, I would like this use case to become a feature somehow):

https://stackoverflow.com/questions/48459421/admin-on-rest-how-can-we-preserve-a-query-param-between

[afilp]

@djhi Can you please let me know in Stack Overflow (or here if you wish) if there is a way to do what I ask there or this is restricted by the current implementation? Thanks a lot!

[afilp]

@tomaszmadeyski Did you find any workaround for this? Thanks.

[tomaszmadeyski]

I did. My use case was navigating back after form submission. I used fact, that you are able to pass string which is an url as a redirect value ( redirect="/users/1").

Since I'm using my custom history:

import { history } from './myCustomHistory'

<App history={history()} ... />

myCustomHistory is:

import { createBrowserHistory } from 'history';

let browserHistory = null;

export const history = () => {
  if (!browserHistory) {
    browserHistory = createBrowserHistory(); 

    const basePush = browserHistory.push.bind(browserHistory);

    browserHistory.push = (path, state) => {
      basePush(path, { ...state, previous: browserHistory.location.pathname });
    }
  }

  return browserHistory;
}

export const navigateTo = (url) => {
  history().push(url);
}

which basically is a hack: I'm overriding push method by pushing previous url to state. So with this, I'm able to do:

export const DocumentEdit = (props) => {
    const { location } = props;

    return (
        <Edit {...props} >
            <TabbedForm redirect={location.state && location.state.previous ? location.state.previous : false}>

I'm able to access location.previous property which contains _previous_ url so I'm able to "navigate back" after form is submitted

[afilp]

Thanks for the explanation and the hint!

[afilp]

@djhi While the above is a solution, we are required to have custom History, etc. which I do not need it. Do you have a possible other implementation that we may miss (and could be documented in DOCS)? For custom redirection? Thanks.

[fzaninotto]

1384 was an attempt at implemeting this

[djhi]

Please note that you can also pass a custom path as the redirect prop (eg /my-custom-route)

See the redirect resolver code: https://github.com/marmelab/react-admin/blob/master/packages/ra-core/src/util/resolveRedirectTo.js

[djhi]

Fixed by #1913

[AnanthChristy]

If you came here looking to use redirect in a custom <FormWithRedirect /> Component

Then use redirect as shown below,

<SaveButton
        saving={formProps.saving}
        handleSubmitWithRedirect={formProps.handleSubmitWithRedirect}
        redirect={"edit"}
        resource="items"
 />

The other options include

switch (redirectTo) {
        case 'list':
            return basePath;
        case 'create':
            return `${basePath}/create`;
        case 'edit':
            return linkToRecord(basePath, id);
        case 'show':
            return `${linkToRecord(basePath, id)}/show`;
        default:
            return redirectTo;
    }