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

Kann jemand den Unterschied zwischen erklären

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

und

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

Ich kenne die Bedeutung von "genau" nicht.

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.

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.

Schauen Sie hier: https://reacttraining.com/react-router/core/api/Route/exact-bool

genau: bool

Wenn true, stimmt dies nur überein, wenn der Pfad location.pathnamegenau mit dem übereinstimmt .

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

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

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>