React lazy composants non chargés sur les routes dynamiques

J'ai utilisé la réaction paresseuse et le suspense sur les routes dynamiques, mais je ne peux pas rendre les composants chargés paresseusement.

J'ai déjà recherché l'utilisation de lazy sur les routes mais je n'ai vu personne l'utiliser sur des routes dynamiques (localhost: 8080 / dynamic / dynamic ).

le chargement de composants sur des routes dynamiques fonctionne pour moi, le chargement différé fonctionne également si j'ai une route statique, mais lorsque j'ai essayé de combiner les deux, le composant ne se charge pas.

voici un exemple de ce que j'ai fait,

import Loader from './path/toFile';
import Home from './path/toFile';
const LazyLoadedComponent = lazy(() => import('./path/toFile'));

const App = () => {
 return(
  <Router>
     <Switch>

        // Home has multiple views controlled by buttons
        // A view contains selections with corresponding id
       <Route exact path="/:viewType?" component={Home} /> 

       // this component doesn't load when I select something which links me to this dynamic route.
       <Suspense fallback={Loader}>
         <Route path="/viewType/:selectionId" component={LazyLoadedComponent} />
       </Suspense>

     </Switch>
   </Router>
 )
}

Je veux juste que mon composant soit chargé une fois que je vais sur cette route. Mais le résultat est qu'il charge Home, mais lorsque j'en sélectionne un dans la sélection, il affiche juste l'index.html avec un blanc, je n'ai vu aucune erreur produite.