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

Retired Boards Appdev Tools
1

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.

Nov-30-2020 18-23-32.gif

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

  1. Stay on the current page until the user clicks “Leave page” in the modal.

Actual behavior

  1. “another page” is immediately loaded behind the modal :disappointed_face:
2

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.

3

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/b1a5d9bb6dbb4144b8ecf1c22534c9070fda5e3d

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/001b263286185e3a620456b2b3165f6197ede3e9

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.