React does not render component to url's that uses dynamic routing - reactjs

Question

I'm trying to match the url path to perform dynamic routing, but the component is not being Rendered at the path. What am i doing wrong here?
btw the route to the CollectionsOverview component is working.
Shop Component.js :
https://imgur.com/Z7P4jjH
onst ShopPage = ({ match }) => {
console.log(`Shop Component ${match.path}`);
return (
<div className='shop-page'>
<Switch>
<Route exact path={`/${match.path}`} component={CollectionsOverview} />
<Route
path={`/${match.path}/:collectionId`}
component={CollectionPage}
/>
</Switch>
</div>
);
};
export default ShopPage;
Collection Component.js:
https://imgur.com/Wu36EAV
const CollectionPage = () => {
console.log(`Collection Page`);
return (
<div className='collection-page'>
<h2>Hello</h2>
</div>
);
};
Result:
https://imgur.com/UccQgB8

Answer 1

Put /${match.path}/:collectionId path before /${match.path} and remove exact from route.
Here is working code: https://codesandbox.io/s/react-router-dynamic-routing-r714l
import React, { useEffect } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Switch, Link } from "react-router-dom";
const CollectionOverview = () => {
return (
<div>
<div>CollectionOverview</div> <br />
<Link to="/collection/1">To Collection 1</Link> <br />
<Link to="/collection/2">To Collection 2</Link> <br />
<Link to="/collection/3">To Collection 3</Link> <br />
<Link to="/collection/4">To Collection 4</Link> <br />
</div>
);
};
const CollectionPage = props => {
return <div>CollectionPage for ID: {props.match.params.id}</div>;
};
const HomeComponent = () => {
return <div>Home Component</div>;
};
function App() {
return (
<BrowserRouter>
<div>
<Link to="/">To Home</Link>
<br />
<Link to="/collection">To Collection Overview</Link>
<br />
</div>
<Switch>
<Route path="/collection/:id" component={CollectionPage} />
<Route path="/collection" component={CollectionOverview} />
<Route path="/" component={HomeComponent} />
</Switch>
</BrowserRouter>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);