Reaktion: Unterschied zwischen <Route path path = “/” /> und <Route path = “/” />

161

Kann jemand den Unterschied zwischen erklären

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

und

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

Ich kenne die Bedeutung von "genau" nicht.

Batt
quelle
1
Die Antworten sind alle großartig. Man kann jedoch Zweifel haben wie "Warum können wir dann nicht für alle Routen <code> genau </ code> haben?" Stellen Sie sich eine URL vor, die ungefähr so ​​aussieht. <code> yourreactwebsite.com/getUsers/userId= ? </ code> Dies ist ein Beispiel, bei dem die Benutzer-ID dynamisch in die URL eingegeben wird und wir hier nicht mit der <code> exakten </ code> Requisite in Ihrem Router arbeiten können.
VIJAYKUMAR REDDY ALAVALA

Antworten:

263

In diesem Beispiel eigentlich nichts. Der exactParameter kommt ins Spiel, wenn Sie mehrere Pfade mit ähnlichen Namen haben:

Stellen Sie sich zum Beispiel vor, wir hätten eine UsersKomponente, die eine Liste von Benutzern anzeigt. Wir haben auch eine CreateUserKomponente, mit der Benutzer erstellt werden. Die URL für CreateUserssollte unter verschachtelt sein Users. Unser Setup könnte also ungefähr so ​​aussehen:

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

Wenn wir jetzt zum http://app.com/usersRouter gehen, durchläuft das Problem alle definierten Routen und gibt die ERSTE gefundene Übereinstimmung zurück. In diesem Fall würde es also zuerst die UsersRoute finden und sie dann zurückgeben. Alles gut.

Aber wenn wir zu http://app.com/users/creategehen würden, würde es wieder alle unsere definierten Routen durchlaufen und das ERSTE Match zurückgeben, das es findet. React Router führt teilweise Übereinstimmungen durch, stimmt also /usersteilweise überein /users/create, sodass die UsersRoute fälschlicherweise wieder zurückgegeben wird!

Der exactParameter deaktiviert die teilweise Übereinstimmung für eine Route und stellt sicher, dass die Route nur zurückgegeben wird, wenn der Pfad genau mit der aktuellen URL übereinstimmt.

In diesem Fall sollten wir exactunsere UsersRoute so ergänzen , dass sie nur auf Folgendes passt /users:

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

Die Dokumente erklären exactausführlich und geben andere Beispiele.

Chase DeAnda
quelle
11
"Wenn wir jedoch zu app.com/users/create gehen, werden alle definierten Routen erneut durchlaufen und das ERSTE gefundene Spiel zurückgegeben." - Tatsächlich werden alle Routen zurückgegeben, für die eine Übereinstimmung gefunden wurde (vollständig oder teilweise). Das von @Chase DeAnda beschriebene Verhalten tritt nur auf, wenn die <Route> von einem <Switch> -Tag eingeschlossen sind.
Watsabitz
4
exactsollte meiner Meinung nach die Standardeinstellung sein
Alexander Derck
Was ist, wenn wir jede Routendefinition in verschiedenen Komponenten haben, ich meine /admin//usersin der Admin-Komponente und /admin/users/createin der Root-Komponente? Ich habe derzeit diese Situation und die typische exactLösung funktioniert nicht richtig.
Yulio Aleman Jimenez
Ich denke, dieses Verhalten funktioniert nur, wenn beide Routen auf der gleichen Ebene des Switch-Elternteils (oder der Komponente) sind
Yulio Aleman Jimenez
1
@ChaseDeAnda was ich brauche ist genau das Gegenteil. Vielleicht sollte ich eine neue Antwort auf SO schreiben, um meine Situation zu klären und richtige Antworten zu erhalten.
Yulio Aleman Jimenez
7

Kurz gesagt, wenn Sie mehrere Routen für das Routing Ihrer App definiert haben, die einer solchen SwitchKomponente beigefügt sind .

<Switch>

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

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

</Switch>

Dann müssen Sie exactder Route ein Schlüsselwort hinzufügen, dessen Pfad auch im Pfad einer anderen Route enthalten ist. Zum Beispiel ist der Home-Pfad /in allen Pfaden enthalten, sodass ein exactSchlüsselwort erforderlich ist, um ihn von anderen Pfaden zu unterscheiden, die mit beginnen /. Der Grund ist auch ähnlich wie /functionsPfad. Wenn Sie einen anderen Routenpfad wie /functions-detailoder verwenden möchten, /functions/open-doorder /functionsdarin enthalten ist, müssen Sie ihn exactfür die /functionsRoute verwenden.

melkerarac
quelle
-1

Die kürzeste Antwort ist

Bitte versuchen Sie dies.

<switch>
   <Route exact path="/" component={Home} />
   <Route path="/about" component={About} />
   <Route path="/shop" component={Shop} />
 </switch>
Jamal Sheikh Ali
quelle
1
Dies erklärt im Grunde nichts die Bedeutung des exactAttributs / der Requisite und ist daher sicherlich keine "Antwort". Sie sollten versuchen, die tatsächlich gestellte Frage zu beantworten, anstatt eine Lösung für ein Problem zu finden, bei dem Sie sich nicht sicher sind, ob OP tatsächlich vorliegt.
Victor Zamanian