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

Posted 2023-02-22

【中文标题】反应路由器相同的路由不同的参数

【英文标题】：React router same route different parameters

【发布时间】：2020-10-17 07:10:45

【问题描述】：

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

<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 到类别视图

我怎样才能像这样路由我的应用程序？

【问题讨论】：

在您的类别路由中，您需要将页面参数限制为仅接受数字

【参考方案1】：

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

【讨论】：

still app.com/usb-cable/light-cable/ 将我带到类别而不是产品，因为类别页面与此 url 匹配