Optional path segment options

[znycheporuk]

Version

1.18.1

Issue

Right now there is a problem with ambiguous routes, if optional path segment is used before dynamic path segment, for example:

app/
├── routes/
│   ├── ($lang)._index.tsx
│   ├── ($lang).$slug.tsx
└── root.tsx

Expected behaviour

URL	Matched Route
/	($lang)._index.tsx
/fr	($lang)._index.tsx
/some-slug	($lang).$slug.tsx <—
/en/some-slug	($lang).$slug.tsx

Current behaviour

URL	Matched Route
/	($lang)._index.tsx
/fr	($lang)._index.tsx
/some-slug	($lang)._index.tsx <—
/en/some-slug	($lang).$slug.tsx

It turns out there is an issue in official documentation, it describes Expected behaviour, but works as Current behaviour

URL	Matched Route
/american-flag-speedo	($lang).$productId.tsx

Proposal

Add new field to handle export, to configure possible values of optional path segment:

export const handle = {
  optionalPathSegmentOptions: {
    lang: ["en", "es"]
  }
}

Then, if lang param equals to one of configured values — ($lang)._index should be used, in another case — use ($lang).$slug.

It can be set on root route, and overridden in any other route, same as meta.
If not provided — fallback to current behaviour.

Discussion

Similar issue described here #5883

Here is a short summary by @kiliman

The problem with this routing configuration is that it has ambiguous routes. When Remix sees an optional param, it will generate routes with and without the param.

($lang).$slug
($lang)._index

/:lang/:slug
/:lang  *index

/:slug
/       *index

So /en/some-slug will match /:lang/:slug

However, /some-slug ends up matching /:lang *index, because it has higher specificity. It never gets a chance to match /:slug. If you notice in the examples, they don't have any index routes. <— NOT TRUE AT THE MOMENT, examples DO have index route

I recommend not mixing index routes with optional params. Instead, use an explicit route like /home.

One of the most popular usages of optional path segment is using it for lang param, as shown higher.
In this case we know languages we support e.g. ["en", "es", "fr"], and therefore, we can check if :lang? matches one of them and make a decision if we should use ($lang)._index or ($lang).$slug.