Qualcuno può spiegare la differenza tra
<Route exact path="/" component={Home} />
e
<Route path="/" component={Home} />
Non conosco il significato di "esatto"
Qualcuno può spiegare la differenza tra
<Route exact path="/" component={Home} />
e
<Route path="/" component={Home} />
Non conosco il significato di "esatto"
Risposte:
In questo esempio, niente di veramente. Il exact
parametro entra in gioco quando si hanno più percorsi con nomi simili:
Ad esempio, immagina di avere un Users
componente che mostrava un elenco di utenti. Abbiamo anche un CreateUser
componente utilizzato per creare utenti. L'URL per CreateUsers
deve 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/users
router, passerà attraverso tutti i nostri percorsi definiti e restituirà la PRIMA corrispondenza che trova. Quindi, in questo caso, trova Users
prima il percorso e poi lo restituisce. Tutto bene.
Ma, se ci http://app.com/users/create
andassimo, ripercorrerebbe di nuovo tutte le nostre rotte definite e restituirebbe la PRIMA corrispondenza trovata. Reagire fa router corrispondenza parziale, così /users
parzialmente le partite /users/create
, quindi sarebbe tornare in modo errato il Users
percorso di nuovo!
Il exact
parametro 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 exact
al nostro Users
percorso in modo che corrisponda solo a /users
:
<Switch>
<Route exact path="/users" component={Users} />
<Route path="/users/create" component={CreateUser} />
</Switch>
I documenti spiegano exact
in dettaglio e forniscono altri esempi.
exact
secondo me dovrebbe essere il default
/admin//users
nel componente Admin e /admin/users/create
nel componente Root ??? Attualmente ho questa situazione e la exact
soluzione tipica non funziona correttamente.
In breve, se hai più percorsi definiti per il routing della tua app, racchiuso in un Switch
componente 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 exact
parola 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 exact
parola chiave per differenziarlo da altri percorsi che iniziano con /
. Il motivo è anche simile al /functions
percorso. Se si desidera utilizzare un altro percorso simile /functions-detail
o /functions/open-door
incluso /functions
in esso, è necessario utilizzare exact
il /functions
percorso.
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.pathname
esattamente 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>
exact
dell'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.