search

Shopify / shopify-app-bridge

https://shopify.dev/docs/api/app-bridge
86 stars 9 forks source link

Internal link navigation #344

Open Alagaesia93 opened 5 months ago

Alagaesia93 commented 5 months ago

Describe the bug

Hello! I'm trying to migrate an embedded app (10 years old, some legacy here and there, but not much) with app bridge 3 to Polaris + app bridge 4 I'm finding really hard to work with internal navigation. In the documentation you suggest using <a href="/settings">Settings</a>, but in my dev environment it redirects to ngrok/settings, not to admin.shopify.com/apps/app/settings I tried to play with history and navigation, no success the only success I had is with useNavigate from react-router-dom. navigate('/settings') works like a charm

Not sure if it's my problem, documentation problem or app bridge problem, so here I am asking for help!

To Reproduce

I have not tried to reproduce on a new app. On my app, just add an internal link anywhere Please note that shopify://admin/products works perfectly

Packages and versions

Platform

Alagaesia93 commented 4 months ago

And to add on top of this, I really don't understand why and how to fix this.

<Modal>
  <TitleBar>
    <button onClick={() => {open('/something', '_self')}}>Redirect</button>
  </TitleBar
</Modal>

since it's not using react router navigation, it triggers a request to the server, but the request misses auth tokens, so it returns not authenticated.

I'm sure I'm doing something wrong, but I don't understand what

jordanfinners commented 1 month ago

Is your app using server side rendering or client side?

tranthainhan1 commented 3 weeks ago

try this: <a href="shopify://admin/apps/your-store-handle/settings" target="_self"> ... </a>

jordanfinners commented 3 weeks ago

try this: <a href="shopify://admin/apps/your-store-handle/settings" target="_self"> ... </a>

If you're routing inside your app you don't need the full path, you can just do /settings Same with _self, you'll generally not need to set this.

Is the app using server side or client side for this?

tranthainhan1 commented 3 weeks ago

try this: <a href="shopify://admin/apps/your-store-handle/settings" target="_self"> ... </a>

If you're routing inside your app you don't need the full path, you can just do /settings Same with _self, you'll generally not need to set this.

Is the app using server side or client side for this?

My app is rendered from the client side. The path includes the shopify://admin that prevents my app from reloading and keeps the NavMenu in sync with my app.