the React hook useNavigate and navigate() changes the url and cause 404 page not found.

[mahdi-akbary]

Describe the bug

I send the redirect URL for billing from my server to the frontend of my app which uses Shopify React components and is based on Shopify Starter node project.

To Reproduce

Steps to reproduce the behaviour:

1. Create an node starter shopify app
2. redirect from inside app to charges page for billing to accept plan.
3. it gives 404 because a portion of the url is being duplicated by the navigate()

If applicable, add screenshots to help explain your problem.

Expected behaviour

the navigate() should redirect and should not change the URL.

Contextual information

Packages and versions

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

• @shopify/app-bridge @ 3.1.0
• @shopify/app-bridge-react @ 3.1.0
• @shopify/polaris @ 10.42.0

Platform

• OS: [Linux]
• App: [for example Shopify app, chrome]

Additional context

Add any other context about the problem here, such as your app’s configuration (Node, Next.js, Rails).

[ToxiKejtor]

The issue happens when you have your app opened on url: https://admin.shopify.com/store/somestore/apps/someapp. If you use legacy older app that forces legacy domain, it works fine: https://somestore.myshopify.com/admin/apps/someapp?force_legacy_domain=1.

In short, yes, the issue is happening on the first case. Basically it doubles part of url unnecessary, making the whole url invalid., e.g.: https://admin.shopify.com/store/somestore/store/somestore/charges/111111/RecurringApplicationCharge/confirm_recurring_application_charge?signature=signaturecode

It doubled: "store/somestore/store/somestore"

[matomesc]

Having the same issue - "/store/somestore/store/somestore" instead of just "/store/somestore"

Versions:

@shopify/app-bridge@3.7.8
@shopify/app-bridge-react@3.7.8
@shopify/polaris@11.2.2

This only happens when using the useNavigate() hook. If using App Bridge directly it works fine:

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);

[mahdi-akbary]

Thanks, @matomesc, That's correct! As of now, the only workaround is to use the plain JS redirection suggested in Shopify docs: https://shopify.dev/docs/apps/tools/app-bridge/actions/navigation/redirect-navigate#plain-javascript

import { Redirect } from '@shopify/app-bridge/actions';
.
.
.
const app = useAppBridge();
const redirect = Redirect.create(app);
redirect.dispatch(Redirect.Action.REMOTE, billingUrl);

[krishnarajan-acumenTec]

Having the same issue - "/store/somestore/store/somestore" instead of just "/store/somestore"

Versions:

@shopify/app-bridge@3.7.8
@shopify/app-bridge-react@3.7.8
@shopify/polaris@11.2.2

This only happens when using the useNavigate() hook. If using App Bridge directly it works fine:

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);