I dont know how to create dynamic routes on remix shopify app template

Retired Boards Appdev Tools
,

Topic summary

A developer is encountering a 404 error when trying to pass an order ID through the URL in a Remix Shopify app. When clicking a link to view invoices with an order ID (e.g., /app/invoices/5595712848006), the app treats the ID as a page route rather than a dynamic parameter.

Initial Problem:

  • Using <Link to={/app/invoices/${order.id}}> in orders.tsx
  • File named app.invoices.[id].tsx but accessing wrong parameter name

Attempted Solutions:

  • First suggestion: Change params.orderId to params.id to match the [id] filename convention
  • This correction didn’t resolve the core 404 issue

Working Solution:

  • Rename the file to app.invoices.$orderId.tsx (using $ instead of [] for dynamic segments)
  • Access the parameter using params.orderId in the component
  • Use useParams() from @remix-run/react to retrieve route parameters

The issue appears resolved with the proper Remix file naming convention for dynamic routes using the $ prefix rather than bracket notation.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
3

I hadn’t noticed that :sweat_smile:

Unfortunately the initial problem still remains.