Embedded app links should use absolute urls

App Bridge
1

As recommended for Remix embedded apps, we should link to the app’s pages using absolute paths relative to the app with the Link component.

For example, to navigate to the page https://admin.shopify.com/store/{store}/apps/{app}/app/mypage, the correct approach would be:

<Link url="/app/mypage">

Alternatively, to link to Shopify admin pages, you can use the shopify:// scheme. For example:

<Link url="shopify://admin/products">

These links work seamlessly when clicked normally. However, if you perform an action that bypasses the link’s handling—such as using middle-click or Ctrl+Click to open the link in a new tab…the URL will be opened directly. This can lead to an invalid URL or cause the embedded app to open outside the embedded context.

image

image
image629×290 7.54 KB

Thanks

2

I have same issue, I want to open my custom route at new tab but it will always need auth login

3

@huykon225 as unfortunately we haven’t heard back from shopify on this one I came with a wrapper component for achieving this.

You can see it here: A React component for shopify's remix embedded app that will let opening links in a new tab · GitHub – you will have to replace the app name. Then just replace <Link url=...> with <AdaptiveLink url=...>

if you decide to use it and see problems with it, feel free to tell me so that I can update this gist too.

1 Like
4

Thanks @Soufiane_Ghzal . Your suggestion is quite good. The appName should be app handle

1 Like