Link does not work in <ui-title-bar>

Polaris
1

Hello,

does not work in context of . However, using instead does not work (clicking on the link return a 404):

<ui-title-bar>
  <a href="/valid-app-url" variant="primary">Go</a>
</ui-title-bar>

Thanks
2

Hey @bakura10 i saw same issue, way i solved it is by using (remix, or rr) <Link /> component, instead, which preserves auth.

<ui-title-bar>
  <Link to="/valid-app-url" variant="primary">Go</Link>
</ui-title-bar>
3

Thanks Youness! It does the trick :slight_smile:

4

The issue with this approach Blanklob is that you can’t make the button primary.

@Alan_G could this bug be prioritized? It’s quite critical issue :frowning:

5

Hi folks :waving_hand: , thanks for flagging this, happy to look into this and reach out to our product team for you. Could you share a minimal repo or gist with: head scripts, your markup, and the shopify:navigate-to-router wiring @bakura, plus some steps to see if we can reproduce the 404 on our end in a test environment?

If you’d like to share over DM, just let me know and I can set that up as well. Hope to hear from you soon!

6

Hello Alan,

The simplest is that you install the new React Router template (GitHub - Shopify/shopify-app-template-react-router: An template for building Shopify Apps using React Router v7 and above) and add a simple title bar as in my first message. Sorry I don’t have a reproduction repro but it’s very trivial to reproduce :).

7

It does render as primary? i tried all flavors they all work (primary, secondary, breadcrumb..).

and i agree the native would be better but reason i use this is you can leverage react router link utils.

8

Thanks @bakura10 and @blanklob , I’ll raise this with our product team and keep you updated here. I’ll loop back when I can confirm a fix or if we need more info from you folks, thanks again for the patience on this.

10

Hey folks :waving_hand: - I was able to work with some folks on this, and we have an answer that should help resolve things. Could you try implementing the below:

<RemixLink to="/path" variant="primary"> ?

Let me know if this resolves the issue or if I can help out further. Hope this helps!

11

Hello Alan,

Just to clarify, what is “RemixLink”? I could not find it in the package. Is this the built-in Link component componet from React Router ? Link | React Router API Reference ?

12

Hey @bakura10, Thanks for the follow-up! Just to clarify, Link isn’t from React core. In a Shopify app built with Remix, the recommendation is to import Link from @remix-run/react. Just sharing a reference to our Remix tutorials here.

At the moment, anchor tag elements aren’t supported in Remix, so the best workaround right now is to use Remix’s component.

If you’re not using Remix, the React Router Link might work, but our recommendation is to use Remix, hope this helps clarify things - let me know if I can help out further.