Reagisci: differenza tra <Percorso esatto percorso = “/” /> e <Percorso percorso = “/” />

Qualcuno può spiegare la differenza tra

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

e

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

Non conosco il significato di "esatto"

In questo esempio, niente di veramente. Il exactparametro entra in gioco quando si hanno più percorsi con nomi simili:

Ad esempio, immagina di avere un Userscomponente che mostrava un elenco di utenti. Abbiamo anche un CreateUsercomponente utilizzato per creare utenti. L'URL per CreateUsersdeve essere nidificato sotto Users. Quindi la nostra configurazione potrebbe assomigliare a questa:

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

Ora il problema qui, quando andiamo al http://app.com/usersrouter, passerà attraverso tutti i nostri percorsi definiti e restituirà la PRIMA corrispondenza che trova. Quindi, in questo caso, trova Usersprima il percorso e poi lo restituisce. Tutto bene.

Ma, se ci http://app.com/users/createandassimo, ripercorrerebbe di nuovo tutte le nostre rotte definite e restituirebbe la PRIMA corrispondenza trovata. Reagire fa router corrispondenza parziale, così /usersparzialmente le partite /users/create, quindi sarebbe tornare in modo errato il Userspercorso di nuovo!

Il exactparametro disabilita la corrispondenza parziale per una route e si assicura che restituisca la route solo se il percorso è una corrispondenza EXACT all'URL corrente.

Quindi, in questo caso, dovremmo aggiungere exactal nostro Userspercorso in modo che corrisponda solo a /users:

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

I documenti spiegano exactin dettaglio e forniscono altri esempi.

In breve, se hai più percorsi definiti per il routing della tua app, racchiuso in un Switchcomponente come questo;

<Switch>

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

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

</Switch>

Quindi devi inserire una exactparola chiave nel percorso, il cui percorso è incluso anche nel percorso di un altro percorso. Ad esempio, il percorso principale /è incluso in tutti i percorsi, pertanto è necessario disporre di una exactparola chiave per differenziarlo da altri percorsi che iniziano con /. Il motivo è anche simile al /functionspercorso. Se si desidera utilizzare un altro percorso simile /functions-detailo /functions/open-doorincluso /functionsin esso, è necessario utilizzare exactil /functionspercorso.

Dai un'occhiata qui: https://reacttraining.com/react-router/core/api/Route/exact-bool

esatto: bool

Se vero, corrisponderà solo se il percorso corrisponde location.pathnameesattamente a.

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

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

La risposta più breve è

Per favore, prova questo.

<switch>
   <Route exact path="/" component={Home} />
   <Route path="/about" component={About} />
   <Route path="/shop" component={Shop} />
 </switch>