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

[zouker]

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;

[Liam]

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;`.

[zouker]

I hadn't noticed that 😅

Unfortunately the initial problem still remains.

[matt_daymoon]

Hello, 
I am running into the same issue. 
Did you ever find a solution for this?

[Gajera_Harsh]

@zouker @matt_daymoon 
create file name app.invoices.$orderId.tsx
https://admin.shopify.com/store/{censor}/apps/ges-1/app/invoices/5595712848006

// 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;

If the solution presented meets your needs and addresses your query effectively, I encourage you to accept it as the chosen answer. This will acknowledge the support you received and aid fellow community members in identifying reliable and effective solutions for their similar concerns.
Thank you.