How to define a route if extension of the file is variable?

[lilouartz]

Both of these should be valid URLs:

• https://pillser.com/supplements/100-pure-krill-oil-3336/images/supplement-facts.webp
• https://pillser.com/supplements/100-pure-krill-oil-3336/images/supplement-facts.avif

I tried:

supplement-facts.$format/_route.tsx
supplement-facts[.]$format/_route.tsx
supplement-facts[.$format]/_route.tsx

None of the above work.

[lilouartz]

Not a clue. Tried everything. Would be really handy to have this in the documentation.

[kiliman]

Unfortunately, a dynamic param $format must be the entire URL segment, not just a part of it. This is a limitation of React Router.

So if you need to be able to handle any type of file extension, you'll need to do something like this:

// routes/supplements.$product.images.$filename
export async function loader({ params }: LoaderFunctionArgs) {
  const { filename } = params
  if (!/^supplement-facts\.(webp|avif)$/.test(filename)) {
    throw new Response('Not Found', { status: 404 })
  }
  // return image file as a response
}

[lilouartz]

ah this explains it! maybe worth adding a callout to the docs because I've spent like two hours experimenting with this haha

[lilouartz]

Thank you for the response