Regex in Route Path

[c06e]

In the previous version (v5) of React-Router, they allowed the ability to specify somewhat complex regex expressions for the router to match on. I bring this up here because I know this project started as a branch off of their latest version but they don't support that anymore, or at least not yet. I feel like this is a decent sized problem for those coming from v5. So, my question is this, did you happen to bring that forward in react-location?

Example:
/:segment(a|b|c)/:id(\\d+)

[tannerlinsley]

I can easily support this. What are all of the different flavors and use cases you would what to see?

[Bessonov]

@tannerlinsley is there any news on that? I ran into this issue with react-router v7 and SEO-friendly URLs like /lawler-in-miami, where /lawler-in-:city doesn’t work.

[schiller-manuel]

I fear this is not easily (if at all ) doable in a type safe way.
cc @chorobin

[Bessonov]

@schiller-manuel Thank you for your response! I am not a user yet and I am not aware of internal details, so this is just a wild guess: maybe Template Literal Types could help here. At the very least, it shouldn't be much different from extracting /.

[schiller-manuel]

a static prefix as your example would be doable. the original question was about regex though so I wonder if that is possible

[Bessonov]

@schiller-manuel Oh, yes, sorry, you're right. There are many aspects to consider, such as file-based routing, the generator, and so on. Even allowing users to provide their custom typings for regex seems challenging.

[borie88]

Our team has a use case as well and similar functionality as Vue's router, which uses path-to-regexp would be enough. We need to use a similar path for two different routes, and a regex match would let us match one to a Mongo ID vs the other with just a simple id. It would look something like this:

const routes = [
 { path: ':post([a-f\d]{24})', ... }, // matches a 24 char mongo ID
 { path: ':org', ... } // matches everything else
];