Need to double click Browser back to go back in history

[kaarelss]

Describe the bug

You have to double click browser back button to go back in history after navigating items in the side navigation menu.

To Reproduce

Steps to reproduce the behaviour:

1. Create a new Shopify template app, following this tutorial: https://shopify.dev/docs/apps/getting-started/create
2. Copy app.additional.tsx from the app/routes directory and paste two new files app.additional_1.tsx and app.additional_2.tsx
3. Change title attribute for <TitleBar> in app.additional_1.tsx to Additional page 1 and Additional page 2 for second page to see the difference when opening links
4. In app.tsx do this import import { useNavigate } from 'react-router-dom';
5. In the App method in app.tsx define following handler

const navigate = useNavigate();
  
const handleSideMenuNavigation = (event: React.MouseEvent, path: string) => {
  event.preventDefault();

  navigate({pathname: path})
};

6. Then within <AppProvider> create <NavMenu> like this

<NavMenu>
  <a
    href="/app"
    onClick={(event) => handleSideMenuNavigation(event, "/app")}
  >
    Home
  </a>
  <a
    href="/app/additional_1"
    onClick={(event) => handleSideMenuNavigation(event, "/app/additional_1")}
  >
    Additional page 1
  </a>
  <a
    href="/app/additional_2"
    onClick={(event) => handleSideMenuNavigation(event, "/app/additional_2")}
  >
    Additional page 2
  </a>
</NavMenu>

7. Open the app.
8. Click on Additional page 1 in the side navigation menu
9. Click on Additional page 2 in the side navigation menu
10. Click Browser back button
11. Click back again

Expected behaviour

When clicking back button for the second time, I would expect app to navigate to home page, but you have to click it twice. I opened app, then went to additional page 1, then to additional page 2, so clicking browsers back two time should navigate me back to home page.

Contextual information

Packages and versions

List the relevant packages you’re using, and their versions. For example:

• @shopify/app-bridge @ 4.1.3
• @shopify/app-bridge-react @ 4.1.3
• @shopify/polaris @ 12.27.0
• react-router @ '6.23.1'

Platform

• OS: MacOS
• OS Version: Sonoma 14.0
• App: Chrome

@itissible/matrixify

[kaarelss]

@henrytao-me We tried to implement navigation for side menu like you mentioned here => #240 (comment)

Navigation is working, but there is this issue with the browser back button and history. Can you please look into this?

[jbeladiya]

Hello @kaarelss,

I'm facing the same issue. Please let me know if you have found any solution for this problem.