New Polaris web component `s-link` doesn't redirect

Hi there, I’m trying to migrate my app to the new Polaris web components but it looks like the <s-link> doesn’t redirect (also the <s-button href=""> ).

I’ve tried with my ruby on rails app and a new app in remix

<s-link href="/app/additional">Test</s-link>

I’ve also found this problem with the <s-link> component:

<s-link href="shopify:admin/settings/checkout/editor/profiles/178328142114?page=profile&context=apps">Open profile page</s-link> redirect to an about:blank page and throws this error:

Failed to launch 'shopify:admin/themes/178328142114/editor?previewPath=%2Faccount' because the scheme does not have a registered handler.

Thank you for reporting this. We have a fix in progress.

1 Like

Hi @Anthony_Frehner, any news here?

Hi @baggio_giacomo - I believe the team recently shipped an update related to this. Are you still experiencing this issue?

Hi @Liam-Shopify,

Yes, the issues are still present on both remix and rails app

Any update here? The <s-button> still does not work with a href attribute on the Remix app.

On reviewing, it appears a new bit of documentation is available to deal with this:

Special navigation effect is required for the Remix app. Sorted. Thanks

@Liam-Shopify We are still encountering this issue, on both the <s-link> and <s-button> component. Our stack is an Express app rendering HTML, with components being included via <script> tags.

Any guidance or suggestions would be greatly appreciated. Thank you!

Yeah, I’ve opened this topic 2 months and no fix has been released. That’s absurd.

@Joshua_Lucas for now I think that you have to manage the navigation manually by setting the onclick property on every link or button.

Hi @baggio_giacomo

Is the issue still with s-link, s-button, or s-clickable?

Hi @Liam-Shopify

The problem is with all of them, none is redirecting me to any of my app pages
I had to manually manage the navigation behaviour by setting the onclick to Turbo.visit(...) (ruby on rails application)

Hello,

I’ve tried on the new React Router official template (GitHub - Shopify/shopify-app-template-react-router: An template for building Shopify Apps using React Router v7 and above) and no link seems to be working neither.

EDIT: I’ve found the problem. I had a custom client.entry.ts, which I did not updated. If after upgrading to the new template you’re facing such issues, make sure that you also follow all those steps: Upgrading from Remix | React Router

@baggio_giacomo If you are using Hotwire / Turbo, please check this thread as I found a pattern that works:

Any idea why this doesn’t redirect with slot?

<s-link slot="breadcrumb-actions" href="/app">Dashboard</s-link>

but this works

<s-link href="/app">Dashboard</s-link>

Any movement on this? I’ve also noticted this when links are rendered as slots:

<s-page heading="Billing">
      <s-link slot="breadcrumb-actions" href="/app/">Home</s-link>
...

Does nothing…

I don’t know if this is related but after upgrading to React Router and Polaris web components, the app menu on the left isn’t on the left nav anymore. They are inline links on the page at the top. I’m using the web component for the links.

Additionally, they are not opening the pages. If I type in the url of the page myself, the page loads but when I click on the link, it goes to the log in page and I see an error in the terminal:

Missing or invalid shop, redirecting to login path | {shop: null}

I followed the migration guide and looked at all the commits to apply all the changes.

I’m having the same issue!! @Liam-Shopify @Beverly_Tang What’s the status of this fix ?