App Bridge 4 clicking on Navigation Menu causes app reload #240

kirillplatonov · 2023-10-01T18:58:12Z

Describe the bug

When clicking on any link in Navigation Menu the app is fully reloaded to open new page. It starts loading from scratch with splash screen, token fetching, etc. This slows down loading dramatically and just looks weird for users.

To Reproduce

Steps to reproduce the behaviour:

Define Navigation Menu with at least two pages:

<ui-nav-menu>
  <a href="/first-page">First page</a>
  <a href="/second-page">Second page</a>
</ui-nav-menu>

Launch app
Click on "First page" link
Click on "Second page" link
Notice full app reloading

CleanShot.2023-10-01.at.20.25.12.mp4

Expected behaviour

App Bridge should treat Navigation Menu clicks as in-app navigation. Same as navigating relative link within app: https://shopify.dev/docs/api/app-bridge-library/reference/navigation#example-navigating-to-routes-within-your-app

If this is not possible then at least we should have a way to add event handler and override Navigation Menu behaviour. This is how we've done it with App Bridge 3: https://github.com/kirillplatonov/shopify-hotwire-sample/blob/main/app/javascript/shopify_app/navigation.js#L25

Contextual information

Packages and versions

App Bridge 4 from CDN

Platform

App: Chrome, Safari, Firefox

Additional context

Tech stack:

Rails
Hotwire
Polaris ViewComponents

The text was updated successfully, but these errors were encountered:

Rafi993 · 2023-10-02T15:45:22Z

I can see this issue too.

patryk-smc · 2023-10-02T19:05:01Z

I have the same issue. There is currently no way to subscribe to Redirect action. This is last thing that prevents me from migrating to the CDN version

MitchLillie · 2023-10-02T22:08:43Z

Hello, thanks for your report.

Can you try specifying your app's root path as the first item in the nav menu, and adding rel="home" to that link? This is what our docs specify.

For example:

<ui-nav-menu>
  <a href="/" rel="home">Home</a>
  <a href="/first-page">First page</a>
  <a href="/second-page">Second page</a>
</ui-nav-menu>

Rafi993 · 2023-10-03T05:55:23Z

Hello, thanks for your report.

Can you try specifying your app's root path as the first item in the nav menu, and adding rel="home" to that link? This is what our docs specify.

For example:
<ui-nav-menu>
  <a href="/" rel="home">Home</a>
  <a href="/first-page">First page</a>
  <a href="/second-page">Second page</a>
</ui-nav-menu>

That doesn't seem to work. I think the page has to be cached like it was done in the previous app bridge

asacarter · 2023-10-08T19:46:14Z

Use react Link to="" instead of <a href=""

bithaolee · 2023-10-10T13:23:40Z

We are experiencing the same problem, please Shopify considers our users who don't use Remix, I looked at the original app bridge react part of the code and there is a CustomRouter defined in there to synchronize the paths between shopify and the app, how can we implement this please

Rafi993 · 2023-10-12T04:47:38Z

Use react Link to="" instead of <a href=""

Thanks. This actually works!!

bithaolee · 2023-10-12T06:27:29Z

Use react Link to="" instead of <a href=""

Thank you very much. It really works.

kirillplatonov · 2023-10-13T17:54:10Z

This doesn't solve the problem for non-react apps. We still need a proper way to make it work with normal links without hacks. Same way as Navigation component works: https://shopify.dev/docs/api/app-bridge-library/reference/navigation#example-navigating-to-routes-within-your-app

paweltatarczuk · 2023-10-13T18:07:33Z

You can do this in plain JavaScript. The key is to prevent browser's default behaviour with event.preventDefault(). Something like this should work:

<ui-nav-menu>
  <a href="/" rel="home" onclick="navigate">Home</a>
  <a href="/first-page" onclick="navigate">First page</a>
  <a href="/second-page" onclick="navigate">Second page</a>
</ui-nav-menu>

<script>
function navigate(event) {
  event.preventDefault();
  history.pushState({}, null, event.target.href);
}
</script>

kirillplatonov · 2023-10-14T05:30:26Z

Yeah, it's true. We doing something similar for Turbo as well. But it's still broken out of the box and needs to be fixed.

awd · 2023-10-14T16:43:41Z

You can do this in plain JavaScript. The key is to prevent browser's default behaviour with event.preventDefault(). Something like this should work:
<ui-nav-menu>
  <a href="/" rel="home" onclick="navigate">Home</a>
  <a href="/first-page" onclick="navigate">First page</a>
  <a href="/second-page" onclick="navigate">Second page</a>
</ui-nav-menu>

<script>
function navigate(event) {
  event.preventDefault();
  history.pushState({}, null, event.target.href);
}
</script>

Is this actually working for you? I've just tested it out and there isn't any difference. The AppBridge navigation is still sending unauthenticated requests into the app - causing page reloading.

It's definitely a hack and behaviour could easily break if not part of AppBridge by default - so I would not advise caution to anyone reading into this.

@kirillplatonov has the right sentiment here - AppBridge should send these requests with the Bearer token provided, so the app can simply load the view without reloading/redirecting.

paweltatarczuk · 2023-10-15T05:20:29Z

Yes, it works for me and no, it's not a hack. This is what React Router Link is doing under the hood.

kirillplatonov · 2023-10-15T06:28:52Z

This code only updates browser URL without navigating to specific page:

history.pushState({}, null, event.target.href);

It's suitable as a fix for #242 when you need to keep focus on the right menu element. But not as a fix for navigation itself.

paweltatarczuk · 2023-10-15T06:59:19Z

I incorrectly assumed that the example app is an SPA. In this case dynamic links won't help as they would require some kind of router that would update the page accordingly.

Maybe it would be possible to workaround this issue with View Transitions API but it's just a guess. I hope app bridge gets a fix for static links in the Navigation component.

iamphonghg · 2023-12-11T04:16:44Z

For those using React, @shopify/app-bridge 3.4.3, react-router-dom 5.3.0.
I also encountered the app reloading when clicking on a navigation item until I used this code on the AppBridgeProvider:
app.subscribe(Redirect.Action.APP, function() {});

henrytao-me · 2023-12-11T17:02:30Z

Hi everyone, I have a few notes about this:

With the new App Bridge via Shopify CDN

There is no subscribe to App Redirect like the older version of App Bridge.
If you just define UINavMenu like below, it will redirect your app like any other multiple pages app.

<ui-nav-menu>
  <a href="/first-page">First page</a>
  <a href="/second-page">Second page</a>
</ui-nav-menu>

To stop the redirect which makes your app as single page app, you need to handle click event and call preventDefault() like below which is what the Link component does in remix template

<ui-nav-menu>
  <a href="/first-page">First page</a>
  <a href="/second-page">Second page</a>
</ui-nav-menu>

// In Javascript
document.querySelector('ui-nav-menu').addEventListener('click', (e) => {
  if (e.target.nodeName === 'A') {
     // handle your own redirect here
      e.preventDefault();
  }
});

With all older version of App Bridge

Subscribing to App Redirect is the way to make your app as a single page app.

awd · 2023-12-11T19:26:52Z

Hi @henrytao-me

I've tried adding the click event listener, and have confirmed the ui-nav-menu is found in the DOM, but the click event is not firing. I suspect the version on this CDN is not the latest?

What version is being served through: https://cdn.shopify.com/shopifycloud/app-bridge.js ?
How do we check for the latest version? (the global shopify object does not appear to have this info)
Is there a way to reference a specific version on the Shopify CDN?

PhiloNL · 2023-12-24T21:27:30Z

Hi @henrytao-me

I'm having trouble with the event listener as well. It only seems to trigger when clicking back and forth.

Screen.Recording.2023-12-24.at.22.25.44.mov

Update
Managed to get it working by adding history.pushState({}, null, event.target.href); after handling the redirect.

daviareias · 2024-01-31T10:12:37Z

Use react Link to="" instead of <a href=""

Where is this component front? from polaris doesn't have a to field anymore.

sebastianpisula · 2024-03-25T12:42:50Z

https://polaris.shopify.com/components/utilities/app-provider?example=app-provider-with-link-component

henrytao-me · 2024-03-25T13:29:30Z

Hi all, I just want to follow up on this issue. Let's me know if anyone is still having issue with this.

TL;DR about how App Bridge CDN handles redirect

For multiple page apps, clicking on side nav items will reload the iframe with correct hmac
For single page apps, apps need to addEventListener to the anchor tag and handle redirect manually. The url is not signed with hmac because the apps want to handle it manually. This comment is correct App Bridge 4 clicking on Navigation Menu causes app reload #240 (comment)

sebastianpisula · 2024-03-25T13:33:33Z

It was helpful for me

Use react Link to="" instead of <a href=""

Thank you very much. It really works.

jbeladiya · 2024-04-08T10:27:40Z

Hi all, I just want to follow up on this issue. Let's me know if anyone is still having issue with this.

TL;DR about how App Bridge CDN handles redirect

For multiple page apps, clicking on side nav items will reload the iframe with correct hmac

For single page apps, apps need to addEventListener to the anchor tag and handle redirect manually. The url is not signed with hmac because the apps want to handle it manually. This comment is correct App Bridge 4 clicking on Navigation Menu causes app reload #240 (comment)

Hi @henrytao-me,

For single-page apps, manually implementing redirection may work, but afterward, if you click the browser's back button, it might not redirect properly. This issue could occur because the URL is not signed with HMAC. Please let me know if there is a solution for this problem.

tobiasdalhof · 2024-04-08T12:34:24Z

Vue 3 example:

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ref, watch } from 'vue'

const router = useRouter()

function navigate(event: MouseEvent) {
  const pathname = (event.target as HTMLAnchorElement).pathname
  history.pushState({}, '', pathname)
  router.replace(pathname)
}

// Re-render ui-nav-menu on route change
const key = ref(0)
watch(router.currentRoute, () => key.value++)
</script>

<template>
  <ui-nav-menu :key="key">
    <a href="/" rel="home" @click.prevent="navigate">Home</a>
    <a href="/page-1" @click.prevent="navigate">Page 1</a>
    <a href="/page-2" @click.prevent="navigate">Page 2</a>
  </ui-nav-menu>
</template>

jbeladiya · 2024-04-08T13:00:50Z

Vue 3 example:

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'

const router = useRouter()
const { t } = useI18n()

function navigate(event: MouseEvent) {
  const pathname = (event.target as HTMLAnchorElement).pathname
  history.pushState({}, '', pathname)
  router.replace(pathname)
}

// Re-render ui-nav-menu on route change
const key = ref(0)
watch(router.currentRoute, () => key.value++)
</script>

<template>
  <ui-nav-menu :key="key">
    <a href="/" rel="home" @click.prevent="navigate">{{ t('home') }}</a>
    <a href="/page-1" @click.prevent="navigate">{{ t('page-1') }}</a>
    <a href="/page-2" @click.prevent="navigate">{{ t('page-2') }}</a>
  </ui-nav-menu>
</template>

Hi @tobiasdalhof,
The solution provided doesn't work for me. Additionally, I have a React app, and my code is as follows:

import { useNavigate } from "react-router-dom"; // v6

const navigate = useNavigate();

const pageRedirect = useCallback((e) => {
    e.preventDefault();
    window.history.pushState({}, '', e.target.href);
    navigate(e.target.pathname);
}, [navigate]);
  
<NavMenu>
        {Object.values(shopifyNavigation).map((i, index) => {
          return (
            <a
              href={i.destination}
              key={index}
              onClick={pageRedirect}
            >
              {i.label}
            </a>
          );
        })}
</NavMenu>

Here, I'm loading all nav-items dynamically

sebastianpisula · 2024-04-08T13:08:12Z

@jbeladiya , example from my project:

import {NavMenu} from "@shopify/app-bridge-react";
import {Link} from "react-router-dom";

<NavMenu>
            <Link to="/">General settings</Link>
            <Link to="/faq">FAQ</Link>
            <Link to="/support">Support</Link>
            <Link to="/plans-and-pricing">Plans and pricing</Link>
        </NavMenu>

jbeladiya · 2024-04-08T13:39:49Z

General settings

@sebastianpisula, approach is same. When I click on a navigation item, I am redirected to a specific route with that particular item highlighted. However, I am facing an issue because in my app, I have a back button to redirect to the previous screen or a specific route. When I click on the back button, it navigates to the specific route, but the corresponding navigation item is not highlighted at that time.

demo.mp4

umutnacak · 2024-05-20T12:37:30Z

Hi @jbeladiya If you didn't already solve your issue here is a code snippet for you to try:

import { NavMenu } from "@shopify/app-bridge-react";
import { useMemo } from "react";
import { useLocation, Link } from "react-router-dom";

const location = useLocation();
const navMenu = useMemo(() =>
<NavMenu key={location.key}>
  {Object.values(shopifyNavigation).map((i, index) => {
    return (
      <Link to={i.destination}>
        {i.label}
      </Link>
    );
  })}
</NavMenu>, [location, shopifyNavigation]);

{ navMenu }

I didn't test with dynamic values so am not sure if it works like this, but here is a simple snippet that I already use in production:

import { NavMenu } from "@shopify/app-bridge-react";
import { useMemo } from "react";
import { useLocation, Link } from "react-router-dom";

const location = useLocation();
const navMenu = useMemo(() =>
<NavMenu key={location.key}>
  <Link to="/" rel="home">
    Home
  </Link>
  <Link to="/page1">
    Page1
  </Link>
  <Link to="/page2">
    Page2
  </Link>
</NavMenu>, [location]);

{ navMenu }

Hope this helps future readers.

jbeladiya · 2024-05-21T05:59:39Z

Hi @jbeladiya If you didn't already solve your issue here is a code snippet for you to try:

import { NavMenu } from "@shopify/app-bridge-react";
import { useMemo } from "react";
import { useLocation, Link } from "react-router-dom";

const location = useLocation();
const navMenu = useMemo(() =>
<NavMenu key={location.key}>
  {Object.values(shopifyNavigation).map((i, index) => {
    return (
      <Link to={i.destination}>
        {i.label}
      </Link>
    );
  })}
</NavMenu>, [location, shopifyNavigation]);

{ navMenu }

I didn't test with dynamic values so am not sure if it works like this, but here is a simple snippet that I already use in production:

import { NavMenu } from "@shopify/app-bridge-react";
import { useMemo } from "react";
import { useLocation, Link } from "react-router-dom";

const location = useLocation();
const navMenu = useMemo(() =>
<NavMenu key={location.key}>
  <Link to="/" rel="home">
    Home
  </Link>
  <Link to="/page1">
    Page1
  </Link>
  <Link to="/page2">
    Page2
  </Link>
</NavMenu>, [location]);

{ navMenu }

Hope this helps future readers.

Hi @underwoodsimon it's work for me. Thanks.
But other side browser back not working properly when I click on browser back two or three time then after it's redirect to previous route. If you have also solution for it let me know.

umutnacak · 2024-05-21T07:10:14Z

@jbeladiya I also faced that issue during development, most likely because react renders twice in strict mode. So probably there are multiple entries of the same location in the browser history and you need to click twice or more on the back button. You need to test on production to see if there is a difference.

liliangrong777 · 2024-06-03T07:53:41Z

Use react Link to="" instead of <a href=""

👍

bithaolee · 2024-06-08T14:03:27Z

This code only updates browser URL without navigating to specific page:
history.pushState({}, null, event.target.href);
It's suitable as a fix for #242 when you need to keep focus on the right menu element. But not as a fix for navigation itself.

I'm trying to switch pages via navigate and change the active menu in the left menus, but I can't seem to get it to work, I'm using open('/path', '_self') but it causes the app to be reloaded, there's Any solution?

kirillplatonov added the bug Something isn't working label Oct 1, 2023

henrytao-me closed this as completed Dec 11, 2023

kaarelss mentioned this issue May 27, 2024

Need to double click Browser back to go back in history #359

Open

eugals mentioned this issue Jul 10, 2024

Navigation through history.pushState() is conflicting with <ui-nav-menu> sometimes #394

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

App Bridge 4 clicking on Navigation Menu causes app reload #240

App Bridge 4 clicking on Navigation Menu causes app reload #240

kirillplatonov commented Oct 1, 2023

Rafi993 commented Oct 2, 2023

patryk-smc commented Oct 2, 2023 •

edited

Loading

MitchLillie commented Oct 2, 2023

Rafi993 commented Oct 3, 2023

asacarter commented Oct 8, 2023

bithaolee commented Oct 10, 2023

Rafi993 commented Oct 12, 2023

bithaolee commented Oct 12, 2023

kirillplatonov commented Oct 13, 2023

paweltatarczuk commented Oct 13, 2023 •

edited

Loading

kirillplatonov commented Oct 14, 2023

awd commented Oct 14, 2023

paweltatarczuk commented Oct 15, 2023

kirillplatonov commented Oct 15, 2023

paweltatarczuk commented Oct 15, 2023

iamphonghg commented Dec 11, 2023

henrytao-me commented Dec 11, 2023

awd commented Dec 11, 2023

PhiloNL commented Dec 24, 2023 •

edited

Loading

daviareias commented Jan 31, 2024

sebastianpisula commented Mar 25, 2024

henrytao-me commented Mar 25, 2024

sebastianpisula commented Mar 25, 2024

jbeladiya commented Apr 8, 2024 •

edited

Loading

TL;DR about how App Bridge CDN handles redirect

tobiasdalhof commented Apr 8, 2024 •

edited

Loading

jbeladiya commented Apr 8, 2024 •

edited

Loading

sebastianpisula commented Apr 8, 2024

jbeladiya commented Apr 8, 2024 •

edited

Loading

umutnacak commented May 20, 2024

jbeladiya commented May 21, 2024

umutnacak commented May 21, 2024

liliangrong777 commented Jun 3, 2024

bithaolee commented Jun 8, 2024

App Bridge 4 clicking on Navigation Menu causes app reload #240

App Bridge 4 clicking on Navigation Menu causes app reload #240

Comments

kirillplatonov commented Oct 1, 2023

Describe the bug

To Reproduce

Expected behaviour

Contextual information

Packages and versions

Platform

Additional context

Rafi993 commented Oct 2, 2023

patryk-smc commented Oct 2, 2023 • edited Loading

MitchLillie commented Oct 2, 2023

Rafi993 commented Oct 3, 2023

asacarter commented Oct 8, 2023

bithaolee commented Oct 10, 2023

Rafi993 commented Oct 12, 2023

bithaolee commented Oct 12, 2023

kirillplatonov commented Oct 13, 2023

paweltatarczuk commented Oct 13, 2023 • edited Loading

kirillplatonov commented Oct 14, 2023

awd commented Oct 14, 2023

paweltatarczuk commented Oct 15, 2023

kirillplatonov commented Oct 15, 2023

paweltatarczuk commented Oct 15, 2023

iamphonghg commented Dec 11, 2023

henrytao-me commented Dec 11, 2023

With the new App Bridge via Shopify CDN

With all older version of App Bridge

awd commented Dec 11, 2023

PhiloNL commented Dec 24, 2023 • edited Loading

daviareias commented Jan 31, 2024

sebastianpisula commented Mar 25, 2024

henrytao-me commented Mar 25, 2024

TL;DR about how App Bridge CDN handles redirect

sebastianpisula commented Mar 25, 2024

jbeladiya commented Apr 8, 2024 • edited Loading

TL;DR about how App Bridge CDN handles redirect

tobiasdalhof commented Apr 8, 2024 • edited Loading

jbeladiya commented Apr 8, 2024 • edited Loading

sebastianpisula commented Apr 8, 2024

jbeladiya commented Apr 8, 2024 • edited Loading

umutnacak commented May 20, 2024

jbeladiya commented May 21, 2024

umutnacak commented May 21, 2024

liliangrong777 commented Jun 3, 2024

bithaolee commented Jun 8, 2024

patryk-smc commented Oct 2, 2023 •

edited

Loading

paweltatarczuk commented Oct 13, 2023 •

edited

Loading

PhiloNL commented Dec 24, 2023 •

edited

Loading

jbeladiya commented Apr 8, 2024 •

edited

Loading

tobiasdalhof commented Apr 8, 2024 •

edited

Loading

jbeladiya commented Apr 8, 2024 •

edited

Loading

jbeladiya commented Apr 8, 2024 •

edited

Loading