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

zouker
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:
https://admin.shopify.com/store/{censor}/apps/ges-1/app/invoices/5595712848006

5595712848006 is the order id

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

orders.tsx:

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

 

 

app.invoices.[id].tsx

 

// 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 (
    <div>
      <h1>Detalhes da Fatura</h1>
      <p>ID da Encomenda: {orderId}</p>
      <Link to="/app/orders">Voltar para Encomendas</Link>
    </div>
  );
};

export default Invoices;

 

 

Replies 2 (2)

Liam
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

zouker
Shopify Partner
3 0 0

I hadn't noticed that 😅

Unfortunately the initial problem still remains.