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

[azerila]

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?

[FabioP]

i have the very same issue

[ivix]

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