[Routing] Catch all routes

[lvndry]

Next JS has a nice feature where you can catch all the routes starting from the slug (documentation).

It could be implemented like:

Example

├── foo
│     ├── [...bar].js
├── foo.js

So:

• /foo would render foo.js.
• /foo/a would render [...bar].js
• /foo/a/b would render [...bar].js
• /foo/b/c/d would render [...bar].js

[lvndry]

Just noticed it's already integrated in remix, but it has to be configured in the config file: https://remix.run/docs/en/v1/api/conventions#remixconfigjs

[kiliman]

You just need to define a splat route $.tsx. You access the slug with params['*']

// routes/blog/$.tsx
export const loader: LoaderFunction = async ({params}) => {
  const slug = params['*']
  ...
}

https://remix.run/docs/en/v1/api/conventions#splat-routes