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

[mashabow]

Hi, I'm developing an embedded app with Next.js.

I added App Bridge's ContextualSaveBar to my form, but it seems to fail to block next/router's navigation.

I also tried with useClientRouting and useRoutePropagation hooks, but I have no success. How can I make it work?

Here is my sample code: https://github.com/mashabow/shopify-contextual-save-bar-and-next-router

Steps

1. Input some text to the TextField.
2. ContextualSaveBar is shown.
3. Click "Go to another page" link.
4. ContextualSaveBar's confirmation modal appears.

Expected behavior

5. Stay on the current page until the user clicks "Leave page" in the modal.

Actual behavior

5. "another page" is immediately loaded behind the modal 😞

[Trish_Ta · Accepted solution]

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-.... 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. 

[mashabow]

Thank you, Trish!

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-.... This allows App Bridge to know about the redirect and automatically block it

I tried this way at first, but it seems unable to block the route change, too.

https://github.com/mashabow/shopify-contextual-save-bar-and-next-router/commit/b1a5d9bb6dbb4144b8ecf...

B) Implementation 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. 

I can block in this way, thanks! I didn't know that workaround of next/router.

https://github.com/mashabow/shopify-contextual-save-bar-and-next-router/commit/001b263286185e3a62045...

Unfortunately, `router.event.on` doesn't seem to accept Promise or async function, so it still needs some work to use App Bridge Modal. But anyway, this is the behavior I wanted.