Gestione dello stato nei parametri di ricerca dell'URL
Sincronizzi filtri, ordinamento e paginazione con l'URL utilizzando useSearchParams.
Gestione dello stato nei parametri di ricerca dell'URL è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.
Perché memorizzare lo stato nell'URL?
Filtri, query di ricerca, ordinamenti e paginazione appartengono all'URL, così gli utenti possono aggiungere la pagina ai preferiti, condividerla e tornare alla stessa visualizzazione senza perdere lo stato.
Hook useSearchParams
useSearchParams() restituisce l'istanza corrente di URLSearchParams e una funzione setter, in modo simile a useState ma con lo stato gestito dalla stringa di query dell'URL.
import { useSearchParams } from 'react-router-dom';
function ProductList() {
const [searchParams, setSearchParams] = useSearchParams();
const query = searchParams.get('q') || '';
const page = Number(searchParams.get('page') || 1);
// ...
}Lettura di un singolo parametro
Usi searchParams.get('key') per leggere un valore. Restituisce null se il parametro è assente, quindi fornisca un valore predefinito.
const sort = searchParams.get('sort') ?? 'name';
const order = searchParams.get('order') ?? 'asc';Scrittura dei parametri senza navigazione
Chiami setSearchParams() con un nuovo oggetto o una funzione updater per modificare i parametri. React Router aggiorna l'URL e riesegue il rendering senza una navigazione completa.
function SortButton({ field }) {
const [searchParams, setSearchParams] = useSearchParams();
const handleClick = () => {
setSearchParams(prev => {
prev.set('sort', field);
prev.set('page', '1');
return prev;
});
};
return <button onClick={handleClick}>Sort by {field}</button>;
}Conservazione degli altri parametri durante l'aggiornamento
Usi la forma con funzione updater di setSearchParams per modificare solo i parametri desiderati, lasciando invariati tutti gli altri.
setSearchParams(prev => {
prev.set('q', newQuery);
// 'sort' and 'page' are unchanged
return prev;
});Sincronizzazione di un input con i parametri di ricerca
Imposti il valore di un input a partire dal parametro dell'URL e aggiorni l'URL al cambiamento, in modo da mantenerli sincronizzati.
function SearchBar() {
const [params, setParams] = useSearchParams();
const q = params.get('q') || '';
return (
<input
value={q}
onChange={e => setParams(prev => {
prev.set('q', e.target.value);
prev.set('page', '1');
return prev;
})}
/>
);
}Flag booleani nei parametri di ricerca
Usi la presenza o l'assenza di un parametro (oppure una stringa '1'/'0') per rappresentare lo stato booleano dell'interfaccia, come un pannello aperto o filtri attivi.
const showFilters = searchParams.has('filters');
const toggleFilters = () => {
setSearchParams(prev => {
if (prev.has('filters')) prev.delete('filters');
else prev.set('filters', '1');
return prev;
});
};Valori array nei parametri di ricerca
URLSearchParams supporta più valori per la stessa chiave. Usi getAll('key') per leggerli come un array.
// URL: /products?tag=react&tag=typescript
const tags = searchParams.getAll('tag'); // ['react', 'typescript']
// Setting multiple values:
const newParams = new URLSearchParams();
selectedTags.forEach(t => newParams.append('tag', t));
setSearchParams(newParams);Sostituzione o aggiunta alla cronologia
Passi { replace: true } come secondo argomento a setSearchParams, così le modifiche ai filtri non riempiono la cronologia del browser.
setSearchParams(prev => { prev.set('q', val); return prev; }, { replace: true });Derivazione dello stato dai parametri
Calcoli i valori derivati (come interi analizzati o enumerazioni convalidate) dai parametri grezzi, che sono stringhe, all'inizio del componente, per usarli in sicurezza in tutto il componente.
const rawPage = searchParams.get('page');
const page = Math.max(1, parseInt(rawPage || '1', 10));
const rawSort = searchParams.get('sort');
const sort = ['name', 'price', 'date'].includes(rawSort) ? rawSort : 'name';Collegamenti con i parametri di ricerca
Usi la proprietà search in un oggetto Link o to per navigare verso un URL con specifici parametri di query impostati.
<Link to={{ pathname: '/products', search: '?sort=price&order=asc' }}>
Sort by Price
</Link>Verifica rapida
Quale metodo di URLSearchParams legge tutti i valori di una chiave ripetuta come ?tag=react&tag=ts?
Riepilogo
useSearchParams() sincronizza lo stato del componente con la stringa di query dell'URL. Usi la forma updater per conservare gli altri parametri, { replace: true } per evitare di appesantire la cronologia e getAll() per i parametri con valori array.
Domande Frequenti
La lezione «Gestione dello stato nei parametri di ricerca dell'URL» è gratuita?
Sì — il testo completo di «Gestione dello stato nei parametri di ricerca dell'URL» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.
Cosa imparerò in «Gestione dello stato nei parametri di ricerca dell'URL»?
Sincronizzi filtri, ordinamento e paginazione con l'URL utilizzando useSearchParams. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare React Academy?
Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Gestione dello stato nei parametri di ricerca dell'URL»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione React Academy?
Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Route annidate e layout con Outlet
- Loader e action (API Data Router)
- Route protette e guard di autenticazione
- Gestione dello stato nei parametri di ricerca dell'URL