Routing to category pages in a shop with multiple nested categories at different levels in React and querying Mongo based on route url
12:00 11 Feb 2026

In my shop I have multiple levels of nested categories (100s of categories with the same item available under multiple categories) for example:

-mens
    -brand a
        -tshirts
            -style a
                -short sleeve
                -long sleeve
            -style b
        -jeans
            -style a
            -style b
    -brand b
        -tshirts
            -style a
            -style b
        -jeans
            -style a
            -style b
-womens
    -brand a
        -tshirts
            -style a
            -style b
        -jeans
            -style a
            -style b
    -brand c
        -tshirts
            -style a
                -short sleeve
                -long sleeve
            -style b
        -jeans
            -style a
            -style b
-special offers
    -mens
        -brand a
            -tshirts
                -style a
                    -short sleeve
                    -long sleeve
                -style b
    -womens
        -brand a
            -tshirts
                -style a
                -style b
            -jeans
                -style a
                -style b

As you can see in this example there is multiple categories with the same name and these can be nested at different levels with no set number of levels.

I had originally used a route like } \> and used location.state to pass an id with navigation. I could then query my DB for that ID and it was simple enough.

However, we want to be able to re-use the url in the form of /category/special-offers/mens/brand-a/tshirts and display items based on this path rather than simply querying with an id.

I will probably still end up querying with an id but the question is what is the best way to ensure I have the right Id.

I have been looking at a route like } />

and then something like:

let { c1, c2, c3, c4, c5, c6, c7, c8, c9, c10 } = useParams();

let categoryTree = [c1, c2, c3, c4, c5, c6, c7, c8, c9, c10];
categoryTree = categoryTree.filter(elm => elm);

My DB structure at the moment has categories with a parent field, so like name, description, image, parentId. The top level categories would have a parentId of null.

Will I need to start at the top level category and query each category name with its parent so for /category/special-offers/mens/brand-a/tshirts i'd start with something like name:special-offers && parentId:null then when i get that Id name:mens && parentId:{Id from first query} and so on.

Or is there a better way to structure this?

reactjs mongodb react-router nested