How to integrate App Bridge's ContextualSaveBar with client-side routing (next/router) ?

Hi Mashabow,

The redirect is happening inside your app so App Bridge is not notified and is not able to block it. You have 2 options:

A) Instead of passing the url as in href, you can add an onClick handler to the Link and dispatch an App Bridge app redirect action: https://shopify.dev/tools/app-bridge/actions/navigation/redirect#redirect-to-a-relative-path-in-the-app. This allows App Bridge to know about the redirect and automatically block it

B) Implement your own handler for blocking the route change with Next.js by listening to the routeChangeStart event: https://github.com/vercel/next.js/discussions/12348#discussioncomment-131768. You could create your own leave confirmation modal by bringing up an App Bridge Message Modal.

1 Like