Internal link navigation

Alagaesia93 commented 6 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

"@shopify/app-bridge-react": "4.1.3",
"@shopify/polaris": "13.2.0",
"@shopify/app": "3.58.2",
"@shopify/cli": "3.59.2",

Platform

OS: Mac Os
OS Version: Sonoma 14
App: Any browser

Alagaesia93 commented 5 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 2 months ago

Is your app using server side rendering or client side?

tranthainhan1 commented 2 months ago

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

jordanfinners commented 2 months 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 2 months 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.

key88sf commented 3 weeks ago

I'm having the same issue but with Polaris components that use links. Any polaris link results in a new tab opening, with the URL being my backend tunnel host instead of the proper https://admin.shopify.com/store/my-store/apps/my-app/... link.

It seems to be related to the use of window.open now instead of the old navigate() method. Anyone else have a fix for this? It seems impossible to get around.

patrickbolle commented 1 week ago

Same issue here. Shame, as the open() function is so clean. Want this to work.

key88sf commented 1 week ago

@patrickbolle I think the fix is this: https://github.com/Shopify/shopify-frontend-template-react/issues/306

Shopify / shopify-app-bridge