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

Question

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

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

此链接：app.com/headphones/airpod3将我带到类别视图，因为路线不理解这是产品或类别的名称。

我的问题是某些类别可能有子类别，但有些没有。我对可选的 :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 时，它将转到产品页面而不是类别