javascript - 在使用 react-router 时有没有办法将参数限制为某些值？

Question

我正在构建一个带有 react 和 react-router 的站点，我有两种不同类型的路由，如下例所示:

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

所以我的产品页面需要类型参数，可以是 A、B 或 C，我希望我访问的任何链接仅在类型为 A、B 或 C 时才匹配我的产品路线。举个例子:

• /type-A/bla-bla-filter -> ProductList 应该加载
• /type-B/other-params -> ProductList 应该加载
• /services/details -> TemplatePage 应该加载

但是根据我现在的情况，任何页面都与 Products 路由匹配，因为类型只是作为斜线后的第一个字符串进行匹配。作为一种解决方法，我尝试将我的 ProductList 组件包装到单独的包装器组件中，这些包装器组件只是像这样发送该类型参数:

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' }} />
    );
  }
});

然后我用静态匹配为每种类型的产品使用不同的路由。

有人知道更好的解决方案吗？

Answer 1

摘自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}
   />

您可以将正则表达式与 Route 组件的确切属性混合使用，以避免产品始终匹配