Implement catch-all routes for dynamic routes? (Example inside)

[daveschumaker]

Hello! Thanks for the hard work you've been doing on Fresh. It's pretty nice to use!

I'm looking at the docs for setting up dynamic routes, I have the following structure in my project:

routes/
├─ books/
│  ├─ index.tsx
│  ├─ [page.tsx]

So, landing on /books will load the index component, and /books/2 will load a component to render anything related to that specific page. The issue is that both index.tsx and [page.tsx] are essentially duplicating logic. As far as I can tell, there isn't a way to create a dynamic catch all route (e.g., a route that will work for /books, /books/1 (potentially redirected to /books), /books/2, /books/174, etc).

Looking at some other frameworks, Next.js has an interesting way of handling this. They use double brackets for a catch all route:

Catch all routes can be made optional by including the parameter in double brackets ([[...slug]]).

For example, pages/post/[[...slug]].js will match /post, /post/a, /post/a/b, and so on.

The main difference between catch all and optional catch all routes is that with optional, the route without the parameter is also matched (/post in the example above).

Anyway, I'd like to throw this idea into the ring for a future version of Fresh. I think it'd be pretty nice to have! 🙏

EDIT:

For now, I just modified /routes/_middleware.ts to forward anything without a page number (...I dislike having a URL to page 1, but it's workable at least):

if (pathname === '/') {
  return Response.redirect(`${origin}/books/1`)
}

if (pathname === '/books') {
  return Response.redirect(`${origin}/books/1`)
}

[lveillard]

For info, there are some use cases that I don't think they have a workaround. For instance when you don't have control for the tree (really dynamic routes, where also the nesting is dynamic)

So It's not only about capturing / and /book in the same file, but /book /book/1 and /book/1/meta/randomDynamicPath

[lveillard]

For inspiration, one of the first PRs around this feature in nextjs
https://github.com/vercel/next.js/pull/14456/files