react-router-dom switch no está renderizando componentes después de la ruta dinámica.

He estado siguiendo un tutorial de comercio electrónico y construyendo sobre él. Soy nuevo en React y React Router Dom.
He establecido una ruta dinámica para las páginas de productos individuales, y ahora estoy tratando de agregar algunas rutas nuevas, por ejemplo contacto, acerca de, etc. Si agrego las nuevas rutas encima de la ruta dinámica, se renderizan correctamente, pero si coloco las rutas debajo de la que tiene la ruta dinámica, por ejemplo /hello, no se renderizan. ¿Es este un comportamiento normal?

“`jsx
<router>

<div>
<navbar totalitems="{cart.total_items}"></navbar>
<switch>
<route exact="" path="/">
<home products="{products}" handleaddtocart="{handleAddToCart}" fetchproduct="{fetchProduct}"></home>
</route>
<route exact="" path="/checkout">
<checkout cart="{cart}" order="{order}" handlecapturecheckout="{handleCaptureCheckout}" error="{errorMessage}" refreshcart="{refreshCart}"></checkout>
</route>
<route exact="" path="/cart">
<cart cart="{cart}" handleupdatecartquantity="{handleUpdateCartQuantity}" handleremovefromcart="{handleRemoveFromCart}" handleemptycart="{handleEmptyCart}"></cart>
</route>
<route exact="" path="/contact">
<contact></contact>
</route>
<route exact="" path="/:id">
<details product="{product}" handleaddtocart="{handleAddToCart}"></details>
</route>
<route exact="" path="/hello">
<h1>Hello World</h1>
</route>
</switch>
</div>

<router>
“`