Optional Route Segments

[sandstrom]

Problem

For localization it's common with an URL structure like this:

/
/about/
/pricing/
…

/de/
/de/about/
/de/pricing/
…

/es/
/es/about/
/es/pricing/
…

Optional segments like this doesn't seem to be supported by the route recognizer, making it difficult to use Ember for any localized website.

Desired outcome

router.add([
  { path: "/:locale/", handler: mother },
]);

let result1 = router.recognize("/es/about");
result1 === [
  { handler: mother, params: { locale: 'es' } },
  { handler: about, params: {} }
];

let result2 = router.recognize("/about");
result2 === [
  { handler: mother, params: { locale: null } },
  { handler: about, params: {} }
];

Workarounds

For Ember apps, the specific case of a language prefix can be solved by using a custom location class, that will extract/inject any language prefix before passing the URL along to the underlying location implementation.

https://api.emberjs.com/ember/release/classes/Location

Prior Art

Related RFCs

This has been proposed in emberjs/rfcs#154, though that proposal include other changes too. Also, I'm unsure about whether this should go into the route recognizer (I think so) or in software consuming this library (not so sure).

Relevant and semi-relevant threads online

https://stackoverflow.com/questions/26871152/ember-optional-url-segments
https://stackoverflow.com/questions/44272568/how-to-make-route-parameters-optional-in-ember-js
https://discuss.emberjs.com/t/dynamic-segments-optional/15699
https://stackoverflow.com/questions/19991135/ember-js-define-route-with-optional-parameter-and-default-model/27187769
https://discuss.emberjs.com/t/is-there-really-no-way-to-make-an-optional-dynamic-segment-in-ember/5010/8