Why doesn't my app's navigation bar update after page transition?

Shopify Apps
1

Hi Guys,

I have a really frustrating situation. I have a button that suppose to link me to a different page within the app, when I click it it will navigate to the page but the Navigation Bar wont change to the page I navigated to.

const navigate = useNavigate();
const handleClick = () => {
  navigate(`../sections`, { replace: true });
};

<Button onClick={handleClick} primary>
  Go to App home screen
</Button>


<ui-nav-menu>
  <Link to="/app" rel="home">
    Home
  </Link>
  <Link to="/app/mysections">My Sections</Link>
  <Link to="/app/sections">Sections</Link>
</ui-nav-menu>

The url in the address bar is changed, if I will refresh than the navigation bar will be correct, but without refresh it stays in the old page nav menu item

2

Hello @JimboBen

You can utilize Shopify App Bridge Redirect Navigation by referring to the documentation provided at https://shopify.dev/docs/api/app-bridge/previous-versions/actions/navigation/redirect-navigate.

import {Redirect} from '@shopify/app-bridge/actions';
const app = useAppBridge();

const redirect = Redirect.create(app);
redirect.dispatch(Redirect.Action.APP, "/sections");
3

Do you find any solution for this ?