-routeur React routes imbriquées v4 et navigation programmatique

Question

Alors, j'ai quelques itinéraires mis en place de cette façon:

index.js

<Route exact path={pathDefault} component={Home}> 
    <Route path={path1} component={component1}/> 
    <Route path={path2} component={component2}/> 
</Route> 

component1.js

<Route exact path={`${props.match.url}`} component={Summary}/> 
<Route path={`${props.match.url}`/someOtherPath1} component={SubComponent1}/> 
<Route path={`${props.match.url}`/someOtherPath2} component={SubComponent2}/> 

COMPONENT2 .js est mis en place de manière similaire.

L'idée ici est que j'ai plusieurs routes de niveau supérieur, qui ont des pages par défaut. Mais, alors sous-routes qui peuvent être commutées entre. Cela fonctionne bien, jusqu'à ce que, à l'un des sous-niveaux comme component1/someOtherPath2 je peux basculer entre someOtherPath1 et someOtherPath2, mais si je tente alors de changer l'un des itinéraires de niveau supérieur en utilisant history.push(path2), au lieu de revenir à un composant de haut niveau (c'est-à-dire le composant par défaut de path1), il finit par pousser une route composée, et donc incorrecte, comme component1/component2. Alors, comment changeriez-vous une route de niveau supérieur dans un composant de niveau inférieur par programmation (de préférence en utilisant history.push ou similaire)?

Answer 1

history.push prend chemin comme argument et non composant:

history.push (chemin, [état])

par exemple:

history.push('/home'); 

ou

history.push('/home', { some: 'state' }); 

vous pouvez lire plus à ce sujet dans le docs.

EDIT:

aussi ne pas oublier le premier / si vous voulez modifier le chemin racine. Par exemple:

history.push('/path1/path2');