web-dev-qa-db-fra.com

Réaction: différence entre <Route 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 la signification de 'exact'

reactjsreact-routerreact-router-dom
26
Batt

Dans cet exemple, rien de vraiment. Le paramètre exact entre en jeu lorsque vous avez plusieurs chemins portant des noms similaires:

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

<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 parcourir toutes nos routes définies et renvoyer la correspondance FIRST trouvée. Donc, dans ce cas, il trouverait la route Users en premier et le renverrait ensuite. Tout bon.

Mais si nous allions dans http://app.com/users/create, il passerait à nouveau par tous les itinéraires définis et renverrait le match FIRST trouvé. Le routeur de réaction fait une correspondance partielle, donc /users correspond partiellement à /users/create, de sorte qu'il renverrait à nouveau incorrectement la route Users!

Le paramètre exact désactive la correspondance partielle pour une route et s'assure qu'il ne renvoie la route que si le chemin est une correspondance EXACT avec l'URL actuelle.

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

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

La documentation explique exact en détail et donne d'autres exemples.

74
Chase DeAnda

En bref, si vous avez plusieurs itinéraires définis pour le routage de votre application, inclus avec le composant Switch 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 le mot clé exact dans la Route dont le chemin est également inclus dans le chemin d’une autre Route. Par exemple, le chemin principal / est inclus dans tous les chemins. Il doit donc comporter le mot clé exact pour le différencier des autres chemins commençant par /. La raison est également similaire à /functions path. Si vous souhaitez utiliser un autre chemin, tel que /functions-detail ou /functions/open-door, qui contient /functions, vous devez utiliser exact pour la route /functions.

2
milkersarac