useParams Returns Undefined values

Question

I'm using react-router-dom 5.2.0

App.jsx

`<Route path="/shop">
<ProductListPage />
</Route>
<Route path="/shop/:page">
<ProductListPage />
</Route>
<Route path="/shop/:gender/:category?">
<ProductListPage />
</Route>
<Route path="/shop/:filter">
<ProductListPage />
</Route>`

ProductListPage.jsx

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

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

console.log(page + " " + gender + " " + filter + " " + category);

return (
<div className="bg-light-gray-1">
  <ProductCategories />
  <ProductList />
  <ClientList />
</div>
);
}`

Can't get page or gender or anything, just undefined.

I have one page for listing all products. Second one is for pagination Third one is for categorization And fourth one is for filtering

But variables where i get from links is not working. For example; "/shop/women/tshirt" "/shop/man/shoe" "/shop/1

I've tried to get values like this but keep getting undefined values.

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

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

console.log(page + " " + gender + " " + filter + " " + category);

Answer 1

Rearrange your App.jsx routes

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