React hook useNavigate() redirects to the wrong url

[its-anas]

Issue summary

• @shopify/shopify-app-express version: 2.0.0
• @shopify/app version: 3.46.5
• @shopify/cli version: 3.46.5
• Node version: v18.16.0
• Operating system: Windows 11 & on Railway server

Expected behavior

useNavigate() should redirect to URL: https://admin.shopify.com/store/storeName/charges/00000/00000/RecurringApplicationCharge/confirm_recurring_application_charge?signature=00000--00000

Actual behavior

useNavigate() is redirecting to URL: https://admin.shopify.com/store/storeName/store/storeName/charges/00000/00000/RecurringApplicationCharge/confirm_recurring_application_charge?signature=00000--00000

The hook adds an unnecessary /store/storeName/ to the original url.
This was working fine until today.
I tried other urls like google.com and it works fine.
I tried uninstalling the app, i tried it on production, it's not working!

Steps to reproduce the problem

1. Import useNavigate and reassign it:

import {useNavigate} from '@shopify/app-bridge-react';
const navigate = useNavigate();

3. Have some element in frontend with:

onClick={() => {
    navigate(planConfirmationUrl);
}}

4. Instead of redirecting to the charge approval page, it manipulates the URL hence redirect to an error page: https://i.imgur.com/uFHmKfK.png

[its-anas]

I found a solution that works.

Source:
Shopify/shopify-app-bridge#214 (comment)

Solution:

import { useAppBridge, useNavigate } from '@shopify/app-bridge-react';
import { Redirect } from '@shopify/app-bridge/actions';

// ❌ This doesn't work
const navigate = useNavigate();
navigate(billingUrl);

// ✅ This works
const app = useAppBridge();
const redirect = Redirect.create(app);
redirect.dispatch(Redirect.Action.REMOTE, billingUrl);