App navigation using the `<ui-nav-menu>` reloads the entire page

[BaggioGiacomo]

Describe the bug

I've implemented the navigation menu like this:

<ui-nav-menu>
  <Link to="/embedded" rel="home">
    Home
  </Link>
  <Link to="/embedded">Signup fields</Link>
  <Link to="/embedded/account">Editable fields</Link>
  <Link to="/embedded/faq">FAQ</Link>
  <Link to="/embedded/how-to-use">How to use</Link>
  <Link to="/embedded/billing">Billing plans</Link>
</ui-nav-menu>

The Link is from react-router-dom. When I click on one of the links, I get fully redirected to its path, making a bad user experience since the merchant has to wait some seconds before seeing the new page.

To Reproduce

Steps to reproduce the behaviour:

1. Install my app on your dev store and accept the onboarding.
2. Using the navigation menu on the left, navigate to another page.
3. You will see how long it takes to bring you there

Expected behaviour

I expect to get redirected immediately, without page reloading. (~ a week ago it works correctly)

Contextual information

Packages and versions

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

• app-bridge: v4
• @shopify/polaris: "12.0.0-beta.0"
• @shopify/polaris-icons: "7.8.0"
• @shopify/app: "3.46.5"
• @shopify/cli: "3.46.5"

Platform

• OS: MacOS
• OS Version: 13.4 (22F66)
• App: Brave

Additional context

I've created my app using the ruby template

[keshav-1504]

Use something like this :

import { useNavigate } from "@shopify/app-bridge-react"
const navigate = useNavigate()
<Link onClick={() => { navigate(`/funnel/${id}/analytics`) }} >
          <Button>
              <Icon source={AnalyticsMinor} color="base" />
          </Button>
</Link>

PS: This is React Code.

[BaggioGiacomo]

This was fixed by Shopify. I think they have pushed something wrong on the app-bridge code base. After some days, it has been fixed automatically

[neok]

Is it fixed? I have same issue

[BaggioGiacomo]

@neok yes, it was fixed some days after I've opened this issue.