Error: Route does not match URL

[old cliff]

hi folks, new in Remix.
I am trying to fetch data with the loader from a CMS.

export async function loader({ params }: LoaderFunctionArgs) {

  const response = await fetch(
    `https://strapi-production-e982.up.railway.app/api/products?populate=*&filters[categorias][slug][$eq]=${params.url}}`
  );

  return json(await response.json());
}

const ProductURL = () => {
  const params = useParams();

  const data = useLoaderData<typeof loader>();
return ...
}

I keep getting the error in the console and in the browser: Error: Route "routes/productos.$url" does not match URL "/productos/panes"
The params.url is "panes" and the route is as productos.$url.tsx

What i am doing wrong here? why the route does not grab the $url value dynamically?

[old cliff]

So i run npx remix routes
<Routes>
<Route file="root.tsx">
<Route path="productos/:url?/:category?/:variant?/:product" file="routes/productos.($url).($category).($variant).$product.tsx" />
<Route path="productos/:url?/:category?/:variant" file="routes/productos.($url).($category).$variant.tsx" />
<Route path="terminos-y-condiciones" index file="routes/terminos-y-condiciones._index.tsx" />
<Route path="preguntas-frecuentes" index file="routes/preguntas-frecuentes._index.tsx" />
<Route path="trabaja-con-nosotros" index file="routes/trabaja-con-nosotros._index.tsx" />
<Route path="productos/:url?/:category" file="routes/productos.($url).$category.tsx" />
<Route path="donde-encontrarnos" index file="routes/donde-encontrarnos._index.tsx" />
<Route path="quiero-ser-cliente" index file="routes/quiero-ser-cliente._index.tsx" />
<Route path="nuestros-clientes" index file="routes/nuestros-clientes._index.tsx" />
<Route path="nuestros-clientes/:slug" file="routes/nuestros-clientes.$slug.tsx" />
<Route path="happy-recetas" index file="routes/happy-recetas._index.tsx" />
<Route path="quienes-somos" index file="routes/quienes-somos._index.tsx" />
<Route path="productos" index file="routes/productos._index.tsx" />
<Route path="contacto" index file="routes/contacto._index.tsx" />
<Route path="productos/:url" file="routes/productos.$url.tsx" />
<Route index file="routes/_index.tsx" />
</Route>
</Routes>

I can see the
<Route path="productos/:url?/:category" file="routes/productos.($url).$category.tsx" />
<Route path="productos/:url" file="routes/productos.$url.tsx" />

But the issue is still arising. Any ideas?

[silk drift]

I think the problem is that productos.$url and productos.($url).$category both match the same URL

/productos/panes could match either productos.$url and productos.($url).$category

because on the category one the $url is optional so it matches /productos/:url/:category and /productos/:category but the second one also matches /productos/:url

[old cliff]

yes, i think that is the issue. I tried again re building what i have done and it crashes again with the same error

i guess i will have to hard code each parent

[silk drift]

in remix.config file you can export a routes function where you can add more routes, here you can run async code so it would be psosible for you to have a single route file outside app/routes and use it to define multiple routes based on the differen products

[old cliff]

thanks, will search for this information in the docs

[old cliff]

i made it work!

app/routes/
├── _index.tsx
├── contacto._index.tsx
├── donde-encontrarnos._index.tsx
├── happy-recetas._index.tsx
├── nuestros-clientes.$slug.tsx
├── nuestros-clientes._index.tsx
├── preguntas-frecuentes._index.tsx
├── productos
│ ├── $categoryRoute.tsx
│ ├── $productRoute.tsx
│ ├── $typeRoute.tsx
│ ├── $variantRoute.tsx
│ └── _index.tsx
├── quienes-somos._index.tsx
├── quiero-ser-cliente._index.tsx
├── terminos-y-condiciones._index.tsx
└── trabaja-con-nosotros._index.tsx

remix.config.js
/** @type {import('@remix-run/dev').AppConfig} */
export default {
routes(defineRoutes) {
return defineRoutes((route) => {
route("productos/:category", "routes/productos/$categoryRoute.tsx");

  route("productos/:category/:type", "routes/productos/$typeRoute.tsx");

  route(
    "productos/:category/:type/:product",
    "routes/productos/$productRoute.tsx"
  );

  route(
    "productos/:category/:type/:product/:variant",
    "routes/productos/$variantRoute.tsx"
  );
});

},
};

if anyone in the future needs to know how to nest dynamic routes, this is the way