Idea: Hook to prevent navigation

[silverwind]

A feature like <Prompt> would be nice to have to prevent navigation based on the outcome of a user-defined condition, for example when a user clicks a <Link> while a unsaved form is present on the page.

I could see a new hook usePreventNavigation to be used for it. It should accept a function that returns either asynchronous result or a Promise for a result. If the result is true, any navigation attempts in the current component or its children should be prevented.

function Page({children}) {
  usePreventNavigation(() => {
    // we have a unsaved form, prevent navigation unless the user confirms a dialog
    return Promise.resolve(true);
  });

  return children;
}

[molefrog]

Hey @silverwind thanks for a suggestion! Something similar has already been asked, I've even put together a small demo that illustrates this principle with wouter here #39

I should however add the Promise support to the demo and place the link to the demo in the readme (we have a special section called Code Recipes for things that are requested but seem a bit out of scope of the library).

Now the question is whether there should be a first-class support for this feature in wouter. IMO the feature sounds really independent from the routing and only operates with location hook, so I would keep it out of the main bundle.

Perhaps, we could release something like wouter-extra when we have enough features like this one in the future.

[silverwind]

Thanks for the example. I will try to implement it like that. Would have preferred to do it without Context, but I guess it's the only way currently.

It's certainly only a feature very few users will need. Maybe useIntercept would be a even better name.

[silverwind]

I've implemented your example. One issue I ran into was that a import of useLocation from wouter instead of wouter/use-location results in a too much recursion, I wonder if that is intended.

https://codesandbox.io/s/wouter-interruptible-transition-ojbkv

[silverwind]

Closing in favor of #112.