History.go(-1) or back() causes full iframe reload in Shopify App Bridge navigation

Shopify App Store
1

Context

  • App Bridge React: 4.2.8 (v4)

  • React Version: 18.x

  • Routing: React Router v6

  • Environment: All browsers (Chrome, Safari, Firefox)

Issue Description

I am building an embedded app using the latest App Bridge React v4.2.8. I am encountering a persistent issue where navigating back from a sub-page (secondary level) to the previous page triggers a full iframe reload instead of a smooth client-side transition.

25db2f8c3b2b6601770d1b8d3040f510

3

Hi @LinYuHao

It’s possible you’re using some patterns from App Bridge V3 even though your on AB4. Instead of history.go(-1) or history.back() , could you use React Router’s useNavigate to navigate programmatically?

4

Thanks for getting back to me. I had already tried useNavigate with no luck. However, after reporting this to Shopify Support, the problem seems to have disappeared today. Everything is back to normal now, despite no changes to my code.

5

Glad to hear it’s working okay now!

6

Hi @Liam-Shopify , @LinYuHao
I just realize that this issue occur very often in my app today. I’m using useNavigate in react router dom v7.
@LinYuHao could u check if the issue occur on your end?

7

Hi, I just ran a test on my app and didn’t find this issue, is there a demonstration of this? @parker

8

hi, I checked my app again today, including my teammates who also tried it, and this issue came up, I wonder if Shopify updated something @Liam-Shopify @parker

9

I’ve been having this problem for the past few days.

10

Me too. I found today.

11

Hi, I have a similar issue: links and redirects implemented according to the documentation, such as open('``https://example.com``', '_top');, no longer work.

When I click on a link, the URL changes in the address bar, but the page does not reload and no navigation occurs. Is anyone else experiencing the same problem?

12

I’ve found a worse problem, it seems that if you click the navigation links after 30 to 60 seconds, Shopify reloads the entire iframe and the token is not valid anymore.

It seems is because it redirects to the wrong path, .e.g if your app is at:
domain/subpath/{page}

After a while if you click enough pages it will try to redirect to:
domain/{page}