web-dev-qa-db-fra.com

React Switch de routeur et chemin exact

J'ai lu ce document sur Switch Reactor-Routeur

Je comprends la définition de Switch and Route

Mais je ne comprenais toujours pas certains points

Si je veux choisir une seule route à rendre, nous utilisons Switch comme ceci

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/a" component={A} />
  <Route path="/b" component={B} />
</Switch>

Le point que je ne peux pas comprendre est que je peux obtenir le même effet sans Switch

 <Route exact path="/" component={Home} />
 <Route path="/a" component={A} />
 <Route path="/b" component={B} />

Alors pourquoi utilisons-nous Switch? Quand devons-nous utiliser Switch?

J'ai trouvé une situation qui devait utiliser Switch

Si je veux rendre un composant spécifique lorsqu'aucun chemin ne correspond

nous devons envelopper Route dans Switch comme ceci

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/a" component={A} />
  <Route path="/b" component={B} />
  <Route component={SpecificComponent} />
</Switch>

Ai-je raison ?

reactjsreact-routerreact-router-v4
8
Anymore

Bien que dans votre cas, vous pouvez obtenir le même effet en utilisant exact, mais ce n'est pas toujours le cas. Cependant, dans les cas où l'un de vos itinéraires contient un itinéraire imbriqué, si vous avez l'itinéraire exact au niveau supérieur, vous ne pouvez pas utiliser les itinéraires imbriqués.

Switch dans le cas ci-dessus sert le but car il rend la première correspondance uniquement

Par exemple,

L'itinéraire Say Home contient des itinéraires imbriqués comme

const Home = (props) => (
     <div>
          <Route path="/dashboard" component={Dashboard}/>
          <Route path="/layout" component={Layout}/>
     </div>
)

Alors maintenant, si vous écrivez

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

et quand vous visitez /dashboard. Ce composant Dashboard ne peut pas être rendu car aucun itinéraire ne correspond à /dashboard au niveau supérieur.

Pour que l'exemple s'exécute correctement, vous pouvez utiliser Switch et réorganiser les itinéraires afin que les chemins qui sont des préfixes vers d'autres chemins soient à la fin

<Switch>
  <Route path="/a" component={A} />
  <Route path="/b" component={B} />
  <Route path="/" component={Home} />
</Switch>
7
Shubham Khatri

Fondamentalement, et le mot clé "exact" ont tous deux le même objectif. (REMARQUE: l'algorithme de correspondance qui utilise des vérifications pour voir si l'URL actuelle commence par ce chemin.) Mais pendant que nous utilisons, l'ordre de la déclaration de route ou de la spécificité est important. La Route plus spécifique doit être ajoutée en haut. Dans ton cas

<Switch>
<Route path="/a" component={A} />
<Route path="/b" component={B} />
<Route exact path="/" component={Home} />
</Switch>

Dans le cas de "exact", lorsque vous passez "exact", cet itinéraire ne correspondra que si le chemin correspond exactement. Dans votre cas, le chemin du domicile est défini sur exact.

<Route exact path="/" component={Home} />
<Route path="/a" component={A} />
<Route path="/b" component={B} />
1
jeet