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

【问题标题】：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 到类别视图

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

【问题讨论】：

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

标签： javascript reactjs react-router react-router-dom connected-react-router

【解决方案1】：

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

【讨论】：

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