App-bridge-react 4, back button does not work correctly

Hi All.

I have “@shopify/app-bridge-react”: “^4.2.1” in my app. I am using the navigation API to navigate from my embedded app to an admin page. eg.

navigation.navigate(`shopify://admin/orders/${shopifyOrderId}`);

I would expect that a click on the back button would return me to my app page. This does not happen as I expect it would. In fact I have seen it work exactly once and then not again.

when navigation to the order page it works as expected. A click on the back button does nothing, and then a second click takes me to the start page of my app, or whatever is the second entry in the history. If I try to use history.pushState and push my current page onto the state before calling navigate I then have to hit the back button twice in order to get back to my app.

Anyone else having similar issues and know how to fix this. I’ve tried using the a tag as showing in the docs Navigation . but with the exact same results.

Any help would be appreciated it kind of breaks the whole idea of the app being a part of shopify if this doesn’t work.

I did a bit more digging. navigation.entries after a fresh load of my app and navigating to the orders page or my app.

I think click on a link with triggers the navigation.navigate.. and end up with my orders page being replaced in the entries.

update

after a bit more digging, I noticed that tab title changes to my app on the first back-button click but the url is not changed, it stays on the admin orders page.

Could this be a bug because my app url is also orders, that seems a bit strange considering the url is definitely different.

Cheers,

Gary