S-link in s-app-nav not working after adding polaris.js

Polaris
1

Hey guys, I have a very simple setup:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="shopify-api-key" content="{{ SHOPIFY_APP_API_KEY }}" />
    <title>shopify_test</title>
    <link rel="preconnect" href="https://cdn.shopify.com/" />
    <script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>
    <script src="https://cdn.shopify.com/shopifycloud/polaris.js"></script>
  </head>
  <body>
    <s-app-nav>
      <s-link href="/" rel="home">Home</s-link>
      <s-link href="/second">Second</s-link>
    </s-app-nav>

    not working:<br/>
    <s-link href="/second" target="auto">nothing happens</s-link><br/>
    <s-link href="/second" target="_self">nothing happens</s-link><br/>

    working:<br/>
    <s-link href="/second" target="_blank">works</s-link><br/>
    <s-link href="/second" target="_top">works</s-link><br/>
    <s-link href="/second" target="_parent">works</s-link><br/>
  </body>
</html>

If I remove the polaris.js the admin navigation an the left side works well. Each click on Home or Second creates a request on my server. After adding polaris.js no requests happen anymore, only the URL in the browser gets updated.

Also the <s-link> with target auto or _self do nothing with polaris.js loaded.

What do I miss? I also don’t understand if I have to use or if I can use as the documentation says here: Navigation

Or do I need a special “wrapper” or something to get the correct GET parameters or authentication header “Bearer …” into the requests?

Thanks so much for your help!

1 Like
2

How are you doing navigation in your app? Are you using a client side router or anything? :thinking:

3

Hi Jordan, I’m not doing anything more than what you can see in my template for the moment. I was just curious following the App home docs.

The <s-app-nav> is working as expected if I don’t load the polaris.js script. I can click an both menu points and i get an ?embedded=1 request to my server. But as soon as I add the polaris lib, it’s not working anymore and I don’t understand why this has an influence. Maybe it’s the same problem as in New Polaris web component `s-link` doesn't redirect

4

I have similar issue, managed to resolve it by using older <ui-nav-menu> component along with my router Link component. Here’s full example:

<ui-nav-menu>
  <Link to="/" rel="home">
    Home
  </Link>
  <Link to="/billing">Billing</Link>
</ui-nav-menu>