反应路由器相同的路由不同的参数

Question

我有两条针对不同页面的路线，例如：

<Switch>
  <Route exact path="/:category/:subCategory?/:page?" component={Category} /> 
  <Route exact path="/:category/:subCategory?/:product/:page?" component={Product} />
</Switch>

此链接：app.com/headphones/airpod3带我进入“类别”视图，因为route无法理解这是产品或类别的名称。

我的问题是某些类别可能有子类别，而有些则没有。我分页了可选的：page参数

我需要路由我的应用，例如：
app.com/usb-cable/light-cable/1或app.com/headphones/apple/airpod3带我到产品页面
app.com/headphones或app.com/headphones/apple进入“类别”视图

我该如何路由我的应用程序？

Answer 1

您需要限制路线，尤其是页面参数，才能接受如下所示的数字 /：page（\ d +）？这只会允许输入数字，因此当您点击app.com/headphones/airpod3时，它将转到产品页面而非类别