React HashRouter with Shopify Embedded App Navigation Not Working

Technical Q&A
1

Hi,

My app is using react/hooks and hashRouter from react-router-dom to do the client side routing. In order for my welcome page to show, the Embedded App navigation needs to be setup to go to https://ourdomain.cloudfront.com/#/welcome However, when I redirect the app to /#/welcome after the installation, it doesn’t redirect to the welcome page. I noticed when I hovered over the shopify app navigations, it has truncated my url to be https://ourdomain.cloudfront.com/ when it should behttps://ourdomain.cloudfront.com/#/welcome. Am I missing something? The router is working fine when I am directly going to the URL without going thru shopify embedded app.

2

Wow, nearly a year has passed and nothing’s changed. Same issue here. Can one of the Shopify’s devs at least come here and say that this is unfortunately unsupported as of now so we have some clarity?

Thanks!

3

Will leave this here in case someone else finds this useful, who also is restricted to using hash router.

const {searchParams} = new URL(window.location.href);
const redirectTo = searchParams.get("redirect-url");
if (redirectTo) {
    const url = new URL(location.href);
    url.searchParams.delete('redirect-url');
    url.hash = redirectTo;
    window.history.pushState(null, "", url);
    return null;
}

To the app extensions I added ?redirect-url=/desired/url. Then in some close-to-root component I added this small piece of code which interprets the query parameter and redirects to the proper destination. Hacky, I know. I hope someone has came up with a better solution.

Cheers!