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

Shopify Partner
3 0 0

I'm trying to send an id via the url, but the app is recognizing that id as a page, so I get the 404 error.

When i click on View Invoices i go to this url:

5595712848006 is the order id

How can i do this? Is there a better way to handle this data?


{my code listing the orders}
<Link to={`/app/invoices/${order.id}`}>View Invoice</Link>





// Certifique-se de importar o useParams
import { Link, useParams } from "@remix-run/react";

// Dentro do componente Invoices, onde você está acessando os parâmetros da rota
const Invoices = () => {
  const params = useParams(); // Obtenha os parâmetros da rota
  const orderId = params ? params.orderId : undefined; // Acesse o orderId se params não for undefined
  // Verifique se orderId é definido antes de invocar qualquer operação nele
  return (
      <h1>Detalhes da Fatura</h1>
      <p>ID da Encomenda: {orderId}</p>
      <Link to="/app/orders">Voltar para Encomendas</Link>

export default Invoices;



Replies 2 (2)

Shopify Staff
2731 298 769

Hi Zouker,


I think that, since your file is named `app.invoices.[id].tsx`, the param you're looking for is `id`, not `orderId so you could change `const orderId = params ? params.orderId : undefined; ` to `const orderId = params.id;`.



Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

Shopify Partner
3 0 0

I hadn't noticed that 😅

Unfortunately the initial problem still remains.