Question

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

＆＃13;

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

＆＃13;

所以我的产品页面需要type参数，可以是A，B或C，只要类型是A，B或C，我希望我访问的任何链接都匹配我的产品路由。举个例子：< / p>

/ type-A / bla-bla-filter - ＆gt; ProductList应该加载
/ type-B / other-params - ＆gt; ProductList应该加载
/ services / details - ＆gt; TemplatePage应该加载

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

＆＃13;

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

＆＃13;

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

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

Answer 1

根据this issue，公认的解决方案是制作三条使用相同处理程序的路线＆＃34;。

Answer 2

从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组件的确切道具混合使用，以避免始终匹配乘积

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

2 个答案: