How to handle dynamic route following an optional dynamic route like ($lang)/$slug.tsx?

[TimoWestland]

In my app I have the following routing structure:

- routes/
  - ($lang)/
    - $slug.tsx
    - index.tsx // re-exports default and loader from $slug

Now when you request /en/some-slug this works fine as $lang will be en and $slug will be some-slug.

However since language is optional, when you request /some-slug my loader in $slug.tsx fails to make the right API call using params.slug which is now undefined and passed as { lang: 'some-slug' }. This kind of makes sense but also feels very strange. I could make it work to use params.lang to make the api call when params.slug is undefined, but that doesn't look very logical.

According to the routing naming conventions docs this should be supported behaviour, so it seems to me I'm missing something here.

My example is the same as the 4th row in the screenshot above. In this case american-flag-speedo will be passed to the loader of index.tsx as params.lang where params.pid would be expected. Also it will only work if index.tsx re-exports the loader and screen from $pid.tsx as index.tsx will be called.

Is this a bug in remix or am I just doing something completely wrong? :)

[sergiodxa]

What version of Remix are you using?

[TimoWestland]

@sergiodxa Thanks for your reply. I'm using v1.12.0 of remix.

[bloushi]

@sergiodxa Can we expect any changes to address this issue from the Remix team, or should we design around this limitation?

[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.

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

[bloushi]

Thats fair. Thanks @kiliman

[nboliver-ventureweb]

@kiliman with this recommendation:

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

How do you have the url for the home page be / and not /home?

In the docs for Optional Segments, it says:

Optional segments match eagerly and thus it will match /:lang. If you have this type of setup it's recommended to look at params.lang in the ($lang)._index.tsx loader and redirect to /:lang/american-flag-speedo for the current/default language if params.lang is not a valid language code.

If I'm reading that correctly, there's no way to set up a default language as optional for the $slug routes? Ie. it will always have to be /en/american-flag-speedo and can never be /american-flag-speedo? Which would not make it optional at all.

I just want to have

_website.($lang)._index.tsx
_website.($lang).$slug.tsx

with URLs like:

/
/fr
/properties
/fr/properties

How can this be set up? Thanks in advance for any input!