How to use routes in Shopify app built using Shopify CLI , React and Shopify App Bridge

Question

I have a problem with using routes in my application, it is a template built using Shopify CLI, React and Shopify App Bridge guided by this documentation here.

Every route I trigger does get sent to the _app.js file within my project as I can log most of the output in the console, but I can't get it to actually include paths of subpages in my apps like https://{apphost}/custompage will not navigate to custompage but an error handler and the custompage gets included in the query. The route and pathname fields of the props return

{ 
  ...
  router: "_error",
  pathname: "_error ",
  ...
}

instead of

{ 
  ...
  router: "custompage",
  pathname: "custompage",
  ...
}

I expected the above to be the result but it isn't. But the custompage url does however appear in the asPath field like this asPath: "/custompage?hmac={hmac}&host={host}&shop={shop}" pretend everything in {} has actual information.

The query field gets the fields it needs as it does on a working page. So the main issue is just routing.

With this in mind I have concluded that maybe I have issues on my side and triggering the server side routes handler, but I do not know where to start redirecting to exact pages instead of the index page that came with the boilerplate code. And I looked on their documentation but they skip most parts that are required to actually explain handling routing with their boiletplate codes. I do not want to edit major functions because I am worried they might stop the whole app from working but I need to be able to handle routes on the app without getting the An unexpected error has occurred. error when trying to route to subpages. Even extensions to whitelisted urls within my app trigger that error, so I think I need help with adding routing to the app or server.

Can anyone help me figure out what I am missing?

Answer 1

I am still new to Shopify but I can say that working with Shopify is a nightmare.

I am not sure if this is the final solution but for now this works: make sure that all the files you are trying to route to have the same naming as your path. If you are routing to https://{appURL}/subpath then your JS file should be subpath.js . I currently can only get it to work if the file is in the same folder as my _app.js. If I move the file from ./subpath to /dir/subpath then I need to change the extension to https://{appURL}/dir/subpath in my Shopify app settings. It seems to operate relative to the _app.js file's location so keep that in mind.

If you used the Shopify CLI and shopify node create to create your app then this could help with your routing 400 headache.