How to use multiple parameters in the URL when the first parameter (the page category) is shared by both Routes in React Router?

So basically I’m building an ecommerce app. My shoppage looks like this

    const ShopPage = ({ match }) => {

    return (
        <div className="shop-page">
            <Route exact path={`${match.path}`} component={CollectionsOverview} />
            <Route path={`${match.path}/:collectionId`} component={CollectionPage} />
            <Route path={`${match.path}/:collectionId/:itemId`} component={ItemPage} />
        </div>
    )
}

export default ShopPage;

Now the issue I’m trying to solve is right now when I go to shop/shoes/blue-sneaker it loads both the item page for blue sneaker AND the sneakers collection overview page. One way I tried solving it is by adding an exact to the CollectionPage route. This seems to work but my question is: is this the right way or are there in your opinion better ways to achieve this? Thank you for your time 🙂

Source: React Router Questions