Add a successful callback for navigate

[Newbie012]

Feature Request

add a success callback to navigate. Something like:

function closeDialog() {
  navigate({ to: "...", onSuccess: () => {
    hideDialog();
    setTimeout(dumpDialog, 1000);
  });
}

Now, you might think, why not simply write:

function close(dialog: Dialog) {
  navigate({ search: { dialog: undefined } });
  dialog.hide();
  setTimeout(dialog.remove, 1000);
}

This might work for most cases, but sometimes, it won't. For example, when using usePrompt.

Motivation

In my case, I have a dialog with a form. When clicking on a button on the screen, it opens the dialog with ?dialog=true search param.
When closing the modal, the function close will be invoked, and the search param as result will be removed.

In order to prevent from users accidentally clicking outside of the dialog while the form is dirty, I have added usePrompt.

The problem is, that while navigate has been aborted, dialog.hide and dialog.remove have been invoked.

[BrendanC23]

+1 to this. I would like to be able to tell whether router.navigate succeeds or not (when used with useBlocker).

[nzyoni]

That sounds great. I would like to be able to invoke a callback after a successful navigation +1

[Newbie012]

I started this discussion back when the library was called react-navigate. It seems that navigate is now a promise, so perhaps simply awaiting the function call will work (though I haven’t tested it).

[BrendanC23]

That will tell you when the promise has resolved, but if you are using useBlocker, there isn't currently a way to determine whether the user chose to continue with the navigation or not after calling navigate.