Réagir : différence entre <Itinéraire exact path=“/” /> et <Route path=“/” />

Quelqu'un peut expliquer la différence entre

 <Route exact path="/" component={Home} />

et

 <Route path="/" component={Home} />

Je ne connais pas le sens exact de'

InformationsquelleAutor Batt | 2018-03-07
  1. 102

    Dans cet exemple, vraiment rien. Le exact param entre en jeu lorsque vous avez plusieurs chemins qui ont des noms similaires:

    Par exemple, imaginons que nous ayons un Users composant qui affiche une liste des utilisateurs. Nous avons également une CreateUser composant qui est utilisé pour créer des utilisateurs. L'url pour CreateUsers doit être imbriquée sous Users. Donc, notre programme d'installation pourrait ressembler à quelque chose comme ceci:

    <Route path="/users" component={Users} />
<Route path="/users/create" component={CreateUser} />

    Maintenant, le problème, ici, quand nous allons à http://app.com/users le routeur va passer par tous de nos itinéraires définis et retour le PREMIER match qu'il trouve. Donc, dans ce cas, on pourrait trouver le Users route d'abord, puis le retourner. Du tout bon.

    Mais, si nous sommes allés à http://app.com/users/create, il serait à nouveau aller à travers l'ensemble de nos itinéraires définis et retour le PREMIER match qu'il trouve. Réagir routeur n'partielle correspondante, afin /users partiellement correspond /users/create, il aurait tort de retour de la Users route de nouveau!

    La exact param désactive la reconnaissance partielle d'un itinéraire et fait en sorte qu'il retourne uniquement la route si le chemin d'accès est une correspondance EXACTE avec l'url actuelle.

    Donc dans ce cas, il convient d'ajouter exact à notre Users itinéraire afin qu'il corresponde uniquement sur /users:

    <Route exact path="/users" component={Users} />
<Route path="/users/create" component={CreateUser} />

    Les docs expliquer exact dans le détail et de donner d'autres exemples.

    • "Mais, si nous sommes allés à app.com/users/create, il serait à nouveau aller à travers l'ensemble de nos itinéraires définis et retour le PREMIER match qu'il trouve." - en fait, ce sera le retour de toutes les Routes qu'il a trouvé une correspondance (totale ou partielle). Le comportement décrit par @Chase DeAnda ne pourra se produire que si le <Route>'s sont clos par un <Switch> tag.
    • Correct! Merci pour les précisions!
    • exact doit être la valeur par défaut, à mon avis
    InformationsquelleAutor Chase DeAnda
  2. 0

    En bref, si vous avez plusieurs itinéraires définis pour votre application de routage, fermée avec Switch composant comme cela;

    <Switch>

  <Route exact path="/" component={Home} />
  <Route path="/detail" component={Detail} />

  <Route exact path="/functions" component={Functions} />
  <Route path="/functions/:functionName" component={FunctionDetails} />

</Switch>

    Alors vous devez mettre exact mot-clé de la Route qui le chemin est également inclus, un autre Itinéraire du chemin. Par exemple maison chemin / est inclus dans tous les sentiers, alors il doit avoir exact mot-clé pour la différencier des autres chemins qui commencent avec /. La raison en est également semblable à /functions chemin. Si vous souhaitez utiliser une autre voie de chemin comme /functions-detail ou /functions/open-door qui comprend /functions en elle, alors vous devez utiliser exact pour la /functions route.

    InformationsquelleAutor milkersarac