Javascript – useParams Returns Undefined values

In React-Router-DOM v5 the route order and path specificity matters. The routes are matched from the top-down in the order they are specified, and path="/shop" matches all path="/shop/*" routes as well, so it is the route that get rendered and renders the ProductsListPage component and no path parameters are set. This is why page, gender, and category are all undefined.

Re-order the routes such that the more specific routes can be matched first before falling back to less specific routes.

Note also that path="/shop/:page" and path="/shop/:filter" the same specificity, so only one or the other can be matched ever, whichever is listed first. This is effectively a duplicate route and one should be removed.

Example:

<Switch>
  ...
  <Route path="/shop/:gender/:category?">
    <ProductListPage />
  </Route>
  <Route path="/shop/:page">
    <ProductListPage />
  </Route>
  <Route path="/shop">
    <ProductListPage />
  </Route>
  ...
</Switch>

or

<Switch>
  ...
  <Route path="/shop/:gender/:category?" component={ProductListPage} />
  <Route path="/shop/:page" component={ProductListPage} />
  <Route path="/shop" component={ProductListPage} />
  ...
</Switch>

React-Router-DOM 5 Route components can also take an array of paths, so instead of duplicating the routes that all render the same ProductListPage component you can declare a single route and pass the paths in an array. The path order still matters here as well.

<Switch>
  ...
  <Route
    path={[
      "/shop/:gender/:category?",
      "/shop/:page",
      "/shop"
    ]}
  >
    <ProductListPage />
  </Route>
  ...
</Switch>

or

<Switch>
  ...
  <Route
    path={[
      "/shop/:gender/:category?",
      "/shop/:page",
      "/shop"
    ]}
    component={ProductListPage}
  />
  ...
</Switch>

In ProductListPage you only need a single useParams hook call, all the params can be destructured from the returned params object.

import { useParams } from "react-router-dom";

export default function ProductListPage() {
  const { page, gender, category } = useParams();

  console.log({ page, gender, category });

  ...
}