Is there a way to restrict params to certain values while using react-router?

Question

I'm building a site with react and react-router and I have two different type of routes, like in the example bellow:

<Route name="products" path="/:type/*" handler={ ProductList } />
<Route name="generic-template" path="/*" handler={ TemplatePage } />

So my products page needs the type parameter, which can be A, B or C and I want any link that I access to match my products route only if the type is A, B or C. So as an example:

• /type-A/bla-bla-filter -> ProductList should load
• /type-B/other-params -> ProductList should load
• /services/details -> TemplatePage should load

But with what I have now, any page is matched by the Products route because the type is simply matched as the first string after the slash. As a workaround, I tried to wrap my ProductList component into separate wrapper components that just send that type parameter along like this:

var TypeAWrapper = React.createClass({
  render: function () {
    return (
      <ProductList params={{ splat: this.props.params.splat, type: 'A' }} />
    );
  }
});

var TypeBWrapper = React.createClass({
  render: function () {
    return (
      <ProductList params={{ splat: this.props.params.splat, type: 'B' }} />
    );
  }
});

and then I used a different route for each type of product with static matching.

Does anyone know a better solution for this?

Answer 1

extracted from official documentation

   {/* It's possible to use regular expressions to control what param values should be matched.
     * "/order/asc"  - matched
     * "/order/desc" - matched
     * "/order/foo"  - not matched*/}
   <Route
     path="/order/:direction(asc|desc)"
     component={ComponentWithRegex}
   />

You could mix regular expressions with the exact props of the Route component to avoid that product is always matched