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

Solved
Tourist
3 0 3

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

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

 

Shopify Staff
Shopify Staff
55 13 20

This is an 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. 

Tourist
3 0 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/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.

 
0 Likes