webentwicklung-frage-antwort-db.com.de

Reagieren: Unterschied zwischen <Route genauer Pfad = "/" /> und <Route Pfad = "/" />

Jemand kann den Unterschied erklären

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

und

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

Ich kenne die Bedeutung von 'genau' nicht

reactjsreact-routerreact-router-dom
26
Batt

In diesem Beispiel nichts wirklich. Der Parameter exact wird verwendet, wenn Sie mehrere Pfade mit ähnlichen Namen haben:

Stellen Sie sich zum Beispiel vor, wir hätten eine Users-Komponente, die eine Liste von Benutzern anzeigt. Wir haben auch eine CreateUser-Komponente, die zum Erstellen von Benutzern verwendet wird. Die URL für CreateUsers sollte unter Users verschachtelt sein. So könnte unser Setup so aussehen:

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

Nun das Problem hier, wenn wir zu http://app.com/users gehen, durchläuft der Router alle unsere definierten Routen und gibt die ERSTE Übereinstimmung zurück, die er findet. In diesem Fall würde die Users-Route zuerst gefunden und dann zurückgegeben. Alles gut.

Aber wenn wir zu http://app.com/users/create gingen, würden wir erneut alle unsere definierten Routen durchlaufen und die erste gefundene Übereinstimmung zurückgeben. Der React-Router stimmt teilweise überein, sodass /users teilweise mit /users/create übereinstimmt, sodass die Users-Route falsch zurückgegeben wird!

Der Parameter exact deaktiviert den partiellen Abgleich für eine Route und stellt sicher, dass die Route nur dann zurückgegeben wird, wenn der Pfad eine EXACT-Übereinstimmung mit der aktuellen URL ist.

In diesem Fall sollten wir exact zu unserer Users-Route hinzufügen, damit sie nur auf /users passt:

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

Die Dokumente erklären exact im Detail und geben weitere Beispiele.

74
Chase DeAnda

Kurz gesagt, wenn Sie mehrere Routen für das Routing Ihrer App definiert haben, schließen Sie die Switch-Komponente wie folgt ein.

<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 das exact-Schlüsselwort in die Route einfügen, deren Pfad ebenfalls in den Pfad einer anderen Route aufgenommen wird. Der Home-Pfad / ist zum Beispiel in allen Pfaden enthalten. Daher muss das Schlüsselwort exact von anderen Pfaden, die mit / beginnen, unterschieden werden. Der Grund ist auch ähnlich wie bei /functions Pfad. Wenn Sie einen anderen Routenpfad wie /functions-detail oder /functions/open-door verwenden möchten, der /functions enthält, müssen Sie exact für die /functions-Route verwenden.

2
milkersarac