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


163

Qualcuno può spiegare la differenza tra

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

e

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

Non conosco il significato di "esatto"


1
Le risposte sono tutte fantastiche. Tuttavia si potrebbe avere un dubbio del tipo "Perché non possiamo avere <code> esatto </code> per tutte le rotte allora?" Immagina un URL simile a questo. <code> yourreactwebsite.com/getUsers/userId= ? </code> Questo è un esempio in cui l'ID dell'utente verrà inserito dinamicamente nell'URL e quindi non possiamo utilizzare il prop <code> esatto </code> nel tuo router qui.
VIJAYKUMAR REDDY ALAVALA,

Risposte:


266

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.


11
"Ma, se andassimo su app.com/users/create , ripercorrerebbe nuovamente tutti i nostri percorsi definiti e restituirebbe la PRIMA corrispondenza trovata." - infatti restituirà tutte le rotte per le quali ha trovato una corrispondenza (totale o parziale). Il comportamento descritto da @Chase DeAnda si verificherà solo se gli <Route> sono racchiusi da un tag <Switch>.
Watsabitz,

4
exactsecondo me dovrebbe essere il default
Alexander Derck del

Che dire se abbiamo ogni definizione di route in diversi componenti, intendo /admin//usersnel componente Admin e /admin/users/createnel componente Root ??? Attualmente ho questa situazione e la exactsoluzione tipica non funziona correttamente.
Yulio Aleman Jimenez,

Penso che questo comportamento
funzioni

1
@ChaseDeAnda quello di cui ho bisogno è esattamente l'opposto. Forse dovrei scrivere una nuova risposta su SO per chiarire la mia situazione e ottenere risposte adeguate.
Yulio Aleman Jimenez,

7

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.



-1

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>

1
Questo non fa praticamente nulla per spiegare il significato exactdell'attributo / prop, e quindi sicuramente non è una "risposta". Dovresti cercare di rispondere alla domanda che ti viene posta piuttosto che dare una soluzione a un problema che non sei sicuro che OP abbia effettivamente.
Victor Zamanian,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.