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

Question

i have two routes for different pages like:

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

this link: app.com/headphones/airpod3 takes me to Category view because route does not understand that this is the name of a product or category.

my problem is that some categories may have subcategories but some do not. And i have pagination the optional:page parameter

i need route my app like:
app.com/usb-cable/light-cable/1 or app.com/headphones/apple/airpod3 to take me to Product page
app.com/headphones or app.com/headphones/apple to Category view

how can i route my app like this?

Answer 1

You need to restrict your routes especially page params to accept number like below /:page(\d+)? this will only allow numbers thus when you hit app.com/headphones/airpod3 it will go to product page not category