search

Shopify / shopify-app-bridge

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

Unexpected routing when the app is hosted behind a subfolder #166

Closed bibiseb closed 1 year ago

bibiseb commented 1 year ago

Describe the bug

I host my dev app behind a subfolder like https://{someId}.eu.ngrok.io/shopify. When I click on the first item of the app menu it appends /shopify to the url and the app loads the NotFound.jsx page instead of the index.jsx.

If I click another menu item, let's say /about, it successfully loads the about.jsx page. But if I refresh the browser (CTRL+R) the app receives a 404 response from the server because Shopify tries to load https://{someId}.eu.ngrok.io/about instead of https://{someId}.eu.ngrok.io/shopify/about.

To Reproduce

Steps to reproduce the behaviour:

  1. Host a new app behind a subfolder like /shopify
  2. Install it on your development store
  3. Try to navigate in the app menu

Expected behaviour

When you click on the first menu item of the app the index.jsx should be displayed. When you refresh another page the app should load the appropriate url.

Contextual information

Packages and versions

List the relevant packages you’re using, and their versions. For example:

Platform

Additional context

Here is my BrowserRouter configuration:

`<BrowserRouter basename={"/shopify"}>

`

henrytao-me commented 1 year ago

@bibiseb this is expected. Regardless the path in application url, Shopify will only get the domain to construct absolute url for all menus. We don't have plan to change this behavior.

slince commented 10 months ago

hello everyone,

i'm very sorry that I resurrected a long-dead issue. i also found the problem. If basename is set in react router, the url generated byNavigationMenu will not work as expected：

<BrowserRouter basename="/shopify">
    <Routes>
    ...
     </Route>
</BrowserRouter>

The link url generated by NavigationMenu will always have duplicate prefixes /shopify/shopify/xxx.

but this is okay

<BrowserRouter>
    <Routes>
        <Route path="/shopify">
         ...
        </Route>
    </Routes>
</BrowserRouter>

I think this is not elegant and flexible enough. Is there any other solution @henrytao-me @kris-tremblay