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!