React-router: Params constraints

[ingro]

Hello! While playing with v4's alpha I found a little awkward how ambiguous matches are handled, especially when using a centralized route config.

So I thought about adding optional params constraint to <Match> to better handle ambiguous matches while iterating a route config.

Use case

If I have these routes in my config (I know they are silly, they're just an example):

const routes = [
  {
    pattern: 'posts/:id',
    component: SinglePost,
  },
  {
    pattern: 'posts/comments',
    component: Comments
  }
];

And I render them like that:

{routes.map((route, i) => (
  <Match key={i} {...route}/>
))}

When I visit /posts/comments both routes will trigger.

Proposal

So I propose to add constraints prop to <Match> (I'm very bad at naming, couldn't figure a better one) that will also validate the params in order to match the route.

Something like that:

<Match pattern="/posts/:id" component={Post} constraints={{ id: /\d+/ }} />

In this way when I visit /posts/comments I will not have a double match anymore!

Hopefully this makes sense, my english it's not very good :(

If you find this proposal somewhat interesting I could work on a PR too!

Thanks for your time and your work on this library!

[timdorr]

This was being discussed for possibly adding on 3.0 in #2286. Also, a WIP version was in #3098.

[pshrmn]

Isn't this already doable using path-to-regexp's custom match parameters?

<Match pattern='/posts/:id(\d+)' component={Post} />

Note: One gotcha with this is that with Babel, JSX strings are automatically escaped, so while in the path-to-regexp documentation they note that you need to use two backslashes (\\d+), in JSX you should only include one (\d+).

<Match pattern='/posts/:id(\d+)' component={PostID} />
// becomes
React.createElement(Match, { pattern: '/posts/:id(\\d+)', component: PostID })

[timdorr]

I wasn't familiar with that, but it sounds like that fits the bill. I think the other idea was if you want to do more business logic on your params, but that's best left for your child function.

[ingro]

Thanks @timdorr and @pshrmn for the infos, I will look into that!