[Shopify Remix App Node] - App navigation not reflecting the correct URL on inital click

[an_autoserve]

I am developing a new custom app for my store using the new Shopify Remix Node app template. Then, I discovered that the navigation is not reflecting the correct page url on initial click. I would have to click on the navigation tab again for the tab to be highlighted (as demonstrated in the GIF below).

Following the Shopify documentations, all I had to do was to add a <Link></Link> component into <ui-nav-menu></ui-nav-menu> in the app.jsx file.

Do anyone have the same problem? Or what am I missing here?

[Darshan13]

I make similer application with Shopify-Remix template but i face same issue which you face.
When i click on a button then page is render and then show but buttons dont change theit background so what can i do ?
please HELP.

this is my code :=

<ui-nav-menu>

        <Link to="/app" rel="home">Clothing Carbon Credits</Link>

        <Link to="/app/orders">Order Details</Link>

        <Link to="/app/pricing">Pricing Details</Link>

        <Link to="/app/faq">Frequently Asked Questions</Link>

</ui-nav-menu>

[an_autoserve]

I think this is a known bug on the Remix template. I posted the issue onto their Github page and got an answer. 

The issue I posted: https://github.com/Shopify/shopify-app-template-remix/issues/369#issuecomment-1750656353

[theaisyaaziz]

you'll need to use the react component instead: https://shopify.dev/docs/api/app-bridge-library/react-components/navmenu

use this <NavMenu></NavMenu>
instead of <ui-nav-menu></ui-nav-menu>