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

Quelqu'un peut-il expliquer la différence entre

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

et

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

Je ne connais pas le sens de 'exact'

Dans cet exemple, rien de vraiment. Le exactparamètre entre en jeu lorsque vous avez plusieurs chemins qui ont des noms similaires:

Par exemple, imaginons que nous ayons un Userscomposant qui affiche une liste d'utilisateurs. Nous avons également un CreateUsercomposant utilisé pour créer des utilisateurs. L'URL de CreateUsersdoit être imbriquée sous Users. Notre configuration pourrait donc ressembler à ceci:

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

Maintenant, le problème ici, lorsque nous allons au http://app.com/usersrouteur, passera par toutes nos routes définies et retournera la PREMIÈRE correspondance qu'il trouve. Donc, dans ce cas, il trouverait d'abord l' Usersitinéraire, puis le renverrait. Tout bon.

Mais, si nous y allions http://app.com/users/create, il passerait à nouveau par toutes nos routes définies et retournerait la PREMIÈRE correspondance qu'il trouve. Le routeur React effectue une correspondance partielle, donc une correspondance /userspartielle /users/create, de sorte qu'il renvoie Usersà nouveau incorrectement la route!

Le exactparamètre désactive la correspondance partielle pour une route et s'assure qu'elle ne renvoie la route que si le chemin correspond exactement à l'URL actuelle.

Donc, dans ce cas, nous devrions ajouter exactà notre Usersroute pour qu'elle ne corresponde que sur /users:

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

Les documents expliquent exacten détail et donnent d'autres exemples.

En bref, si vous avez plusieurs itinéraires définis pour le routage de votre application, inclus avec un Switchcomposant comme celui-ci;

<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 le exactmot-clé de la Route dont le chemin est également inclus par le chemin d'une autre Route. Par exemple, le chemin d'accueil /est inclus dans tous les chemins, il doit donc avoir un exactmot - clé pour le différencier des autres chemins commençant par /. La raison est également similaire au /functionschemin. Si vous souhaitez utiliser un autre chemin de route comme /functions-detailou /functions/open-doorqui comprend, /functionsvous devez l'utiliser exactpour la /functionsroute.

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

exact: booléen

Lorsque true, ne correspondra que si le chemin correspond location.pathnameexactement au.

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

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

La réponse la plus courte est

Veuillez essayer ceci.

<switch>
   <Route exact path="/" component={Home} />
   <Route path="/about" component={About} />
   <Route path="/shop" component={Shop} />
 </switch>