Réagissez: différence entre <Route exact path="/" /> et <Route path="/" />

Question

Quelqu'un peut expliquer la différence entre

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

et

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

Je ne connais pas la signification de 'exact'

Answer 1

Dans cet exemple, vraiment rien. L' 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 doivent être prélevées en vertu de l' 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 à l' 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 l' 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 matchs /users/create, de sorte qu'il aurait tort de retour de l' Users route de nouveau!

L' 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 correspondent exactement à l'url courante.

Donc, dans ce cas, il convient d'ajouter exact notre Users route de sorte qu'il sera seulement correspondre /users:

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

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

Answer 2

En bref, si vous avez plusieurs itinéraires définis pour votre application de routage, jointe Switch composant comme ceci;

<Switch>

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

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

</Switch>

Ensuite, vous devez mettre de l' exact mot-clé de la Route qui le chemin est également inclus, un autre Itinéraire du chemin. Par exemple maison chemin de / est inclus dans tous les sentiers, alors il doit avoir exact mot-clé pour la différencier des autres chemins qui commencent par /. 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 inclut /functions en elle, alors vous devez utiliser exact de la /functions route des.

Answer 3

exact: bool

Lorsque true, ne correspond que si le chemin correspond exactement à location.pathname .

 **path**    **location.pathname**   **exact**   **matches?**

/one            /one/two              true         no
/one            /one/two              false        yes
 

Jetez un oeil ici: https://reacttraining.com/react-router/core/api/Route/exact-bool