App bridge ui-nav-menu reloads iframe for embedded apps

azerila
Shopify Partner
3 0 3

Hi,

I'm trying to migrate to the CDN version of app-bridge.

In the new version <ui-nav-menu> element has replaced <NavigationMenu> component. The documentation looked straight forward, but iframe reloads with every navigation.

 

Everything was fine with <NavigationMenu>. I used it like this:

<NavigationMenu
    navigationLinks={[
{label: 'Dashboard', destination: '/dashboard'},
{label: 'Settings', destination: '/settings'},
]} matcher={(link, location) => link.destination === location.pathname} />

The new version:

<ui-nav-menu>
    <a href="/" rel="home">App</a>
    <a href="/dashboard">Dashboard</a>
    <a href="/settings">Settings</a>
</ui-nav-menu>

But app reloads and looses all state on every navigation.

 

App frontend is a React SPA. Shopify sends a request to the app backend (https://app-domain.com). App checks authentication and redirects to the endpoint that serves frontend static files https://app-domain.com/front

 

Does anyone have any idea on what to do?

Replies 3 (3)

FabioP
Tourist
7 0 0

i have the very same issue

ivix
Shopify Partner
3 0 1

You should implement custom router for sync host and iframe urls

 

https://shopify.dev/docs/api/app-bridge/previous-versions/app-bridge-from-npm/using-react

jaymitBeladiya
Shopify Partner
17 0 5

In app-bridge-react 4.x.x is not possible to use this approach