#block route changes in app directory

44 messages · Page 1 of 1 (latest)

cyan dew
#

Hi, I need to block the browser navigation with route change and back & forth buttons on browser history.

I am not able to achieve this, is the feature planned?
For now I cannot prevent or warn a user when they accidentally used back navigation while filling a form e.g.

I think this is a very common usecase and cannot understand why the router events are removed.

rocky quartzBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

      🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in <id:customize>

      ✅ You can mark a message as the answer for your post with `Right click -> Apps -> Mark Solution`
      (if you don't see the option, try refreshing Discord with Ctrl + R)
restive frigate
#

hmm sounds like a feature next can implement

#

are you using <Link> or router.push() ?

#

no wait

#

have you tried doing it manually like this?

useState(()=>{
// Event listener for the 'beforeunload' event
globalThis.window?.addEventListener('beforeunload', function (e) {

    // Check if any of the input fields are filled
    if (fname !== '' || lname !== '' || subject !== '') {

        // Cancel the event and show alert that
        // the unsaved changes would be lost
        e.preventDefault();
        e.returnValue = '';
    }
});
}, [])
cyan dew
#

it was possible within next/router with Router.events and fairly easy to implement. But without access to the router events i cannot prevent the route change.

already tried to work with popstate event from window but the nextjs route changes are not affected / still processed

cyan dew
restive frigate
#

you sure? the article says back button is also affected, bascially anything that would cause unload page

#

globalThis.window?.onbeforeunload()

cyan dew
#

i need to intercept / prevent the internal routing when there is browser back & forth, or better route change in general.

I could wrap link and router.push in a wrapper which will do my custom logic, thats okay - but then there is still no back & forth interception.

cyan dew
restive frigate
cyan dew
#

the event is not triggered when in SPA & in same context, since there is no unload happening

restive frigate
#

damn you are right

#

maybe you can use router.replace() in EVERY navigation

#

so that there wont be anything added to the back/forward array haha

cyan dew
#

😄

restive frigate
#

yep i saw

cyan dew
#

i need a workaround 😦

restive frigate
#

what about listening to "popstate"

cyan dew
#

been there, done that, not working mind_blow_astonished

restive frigate
#

😭

cyan dew
# 
const preventForthBackNavigation = (event: PopStateEvent) => {
  event.stopPropagation();
  event.preventDefault();

  if (!window.confirm('test')) {
    event.preventDefault();
    window.history.pushState(null, document.title, window.location.href);
  }
};

window.addEventListener('popstate', preventForthBackNavigation, { capture: true });
#

i think this is a creative try, but does not help, since the routing is still executed by the app router -.-

#

guess they just listen to location and do their routing no matter what

restive frigate
#

ok definetly create an issue/discussion in next.js page then maybe someone with more experience knows how to handle this use case

restive frigate
cyan dew
#

yes

restive frigate
#

but it just went through

#

since app router also listen to 'popstate'

#

hmmmmmmmm

cyan dew
#

looks like...

dusty spruce
#

Did you ever figure out a solution for this?

cyan dew
#

never 😦 its very frustrating...

agile vale
#

I'm in the same boat 😅

balmy locust
#

Same here

warped cape
#

same here derp

kind topaz
#

Any updates on this ?

agile vale
#

no

worthy horizon
#

Hello.
Any update about this?