Crea un'app intuitiva sfruttando i parametri di query.
I parametri di ricerca sono coppie nome/valore che puoi aggiungere alla fine di un URL. Ti consentono di memorizzare i dati in quell'URL.
Un'applicazione pratica dei parametri di query consiste nell'archiviare i valori dalla ricerca di un utente.
Utilizzo di React Router per aggiornare i parametri della query
Quando un utente inserisce una query in una barra di ricerca, dovresti memorizzare quella query nell'URL. Ad esempio, se un utente ha cercato in un elenco di blog post nella categoria "reagire", l'URL aggiornato dovrebbe essere simile al seguente: /posts? etichetta=reagisci.
React fornisce l'hook useSearchParams che ti aiuta a leggere o aggiornare le stringhe di query.
Per iniziare, crea una barra di ricerca in App.js.
importare { usaStato } da"reagire";
esportarepredefinitofunzioneApp() {
cost [query, setquery] = useState('')
cost manigliaCambia = (e) => {
setquery(e.bersaglio.valore)
};
ritorno (
<div>
<moduloruolo="ricerca">
<ingressoonChange={handleChange}valore={interrogazione}tipo="ricerca" />
modulo>
div>
);
}Ricordati di seguire migliori pratiche quando si utilizza React per ottenere il massimo da loro.
Successivamente, installa il router React e aggiungi il routing alla tua applicazione. Questo è un must per il funzionamento dell'hook useSearchParams.
importare Reagire da"reagire";
importare Reagire DOM da"react-dom/cliente";
importare"./indice.css";
importare App da"./App";
importare {BrowserRouter, percorso, percorsi} da"reagire-router-dom";
cost root = ReactDOM.createRoot(documento.getElementById("radice"));
radice.render(
<Reagire. Modalità rigorosa>
<BrowserRouter>
<Itinerari>"/" elemento={} />
Itinerari>
BrowserRouter>
Reagire. Modalità rigorosa>
);
Ora puoi salvare le query nell'URL mentre l'utente digita modificando la funzione handleChange().
importare { usaStato } da"reagire";
importare { useSearchParams } da"reagire-router-dom";esportarepredefinitofunzioneApp() {
cost [query, setquery] = useState("");
cost [searchParams, setSearchParams] = useSearchParams({});
cost manigliaCambia = (e) => {
setSearchParams({ domanda: e.target.value });
setquery(e.bersaglio.valore);
};
ritorno (
<div>
<moduloruolo="ricerca">
<ingressoonChange={handleChange}valore={interrogazione}tipo="ricerca" />
modulo>
div>
);
}
Ottenere i valori della query dall'URL
Puoi ottenere un singolo valore di query utilizzando searchParams.get() e passando il nome del parametro di query.
cost [searchParams, setSearchParams] = useSearchParams({});
cost valore = searchParams.get('etichetta')
Per ottenere tutti i parametri della query, utilizzare searchParams.entries().
cost [searchParams, setSearchParams] = useSearchParams({});
cost valori = searchParams.entries()
Questo metodo restituisce un iteratore che puoi iterare utilizzando coppie chiave/valore.
per (cost [chiave, valore] Di valori) {
consolare.tronco d'albero(`${chiave}, ${valore}`);
}
Le coppie chiave/valore sono nell'ordine in cui appaiono nell'URL.
Usa i parametri di ricerca per migliorare la condivisione dei risultati di ricerca
L'hook useSearchParams è ottimo per memorizzare valori di ricerca o altri dati come parametri di query in un URL.
Puoi anche tenere traccia dei valori di ricerca con l'hook useState, ma memorizzarli in un parametro di query significa che le persone possono condividerli tramite l'URL.
