State in URL-Suchparametern verwalten
Synchronisieren Sie Filter, Sortierung und Pagination mit useSearchParams mit der URL.
State in URL-Suchparametern verwalten ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.
Warum sollte der Status in der URL gespeichert werden?
Filter, Suchanfragen, Sortierreihenfolgen und Paginierung gehören in die URL, damit Benutzer die Ansicht als Lesezeichen speichern, teilen und zu derselben Ansicht zurückkehren können, ohne den Status zu verlieren.
useSearchParams-Hook
useSearchParams() gibt die aktuelle URLSearchParams-Instanz und eine Setter-Funktion zurück. Das ist ähnlich wie useState, wird aber durch die Query-Zeichenfolge der URL gesteuert.
import { useSearchParams } from 'react-router-dom';
function ProductList() {
const [searchParams, setSearchParams] = useSearchParams();
const query = searchParams.get('q') || '';
const page = Number(searchParams.get('page') || 1);
// ...
}Einen einzelnen Parameter auslesen
Verwenden Sie searchParams.get('key'), um einen Wert auszulesen. Wenn der Parameter fehlt, wird null zurückgegeben. Geben Sie daher einen Ersatzwert an.
const sort = searchParams.get('sort') ?? 'name';
const order = searchParams.get('order') ?? 'asc';Parameter ohne Navigation schreiben
Rufen Sie setSearchParams() mit einem neuen Objekt oder einer Updater-Funktion auf, um Parameter zu ändern. React Router aktualisiert die URL und rendert die Komponente erneut, ohne eine vollständige Navigation auszuführen.
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>;
}Andere Parameter beim Aktualisieren beibehalten
Verwenden Sie die Form von setSearchParams mit einer Updater-Funktion, damit Sie nur die Parameter ändern, die Sie ändern möchten, und alle anderen unverändert bleiben.
setSearchParams(prev => {
prev.set('q', newQuery);
// 'sort' and 'page' are unchanged
return prev;
});Ein Eingabefeld mit Suchparametern synchronisieren
Steuern Sie den Wert eines Eingabefelds über den URL-Parameter und aktualisieren Sie die URL bei Änderungen, damit beide synchron bleiben.
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;
})}
/>
);
}Boolesche Flags in Suchparametern
Verwenden Sie das Vorhandensein oder Fehlen eines Parameters (oder eine Zeichenfolge wie „1“/„0“), um einen booleschen UI-Status wie ein geöffnetes Panel oder aktive Filter darzustellen.
const showFilters = searchParams.has('filters');
const toggleFilters = () => {
setSearchParams(prev => {
if (prev.has('filters')) prev.delete('filters');
else prev.set('filters', '1');
return prev;
});
};Arraywerte in Suchparametern
URLSearchParams unterstützt mehrere Werte für denselben Schlüssel. Verwenden Sie getAll('key'), um sie als Array auszulesen.
// 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);Verlauf ersetzen oder erweitern
Übergeben Sie { replace: true } als zweites Argument an setSearchParams, damit Änderungen an Filtern den Verlauf des Browsers nicht übermäßig erweitern.
setSearchParams(prev => { prev.set('q', val); return prev; }, { replace: true });Status aus Parametern ableiten
Berechnen Sie abgeleitete Werte (z. B. geparste Ganzzahlen oder validierte Enumerationen) am Anfang Ihrer Komponente aus den rohen Zeichenfolgenparametern, damit Sie sie überall sicher verwenden können.
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';Mit Suchparametern verlinken
Verwenden Sie die Eigenschaft search eines Link- oder to-Objekts, um zu einer URL zu navigieren, in der bestimmte Query-Parameter gesetzt sind.
<Link to={{ pathname: '/products', search: '?sort=price&order=asc' }}>
Sort by Price
</Link>Schnelltest
Welche Methode von URLSearchParams liest alle Werte für einen wiederholten Schlüssel wie ?tag=react&tag=ts aus?
Zusammenfassung
useSearchParams() synchronisiert den Komponentenstatus mit der Query-Zeichenfolge der URL. Verwenden Sie die Updater-Form, um andere Parameter beizubehalten, { replace: true }, um eine übermäßige Erweiterung des Verlaufs zu vermeiden, und getAll() für Parameter mit mehreren Arraywerten.
Häufig gestellte Fragen
Ist die Lektion „State in URL-Suchparametern verwalten“ kostenlos?
Ja — der vollständige Text von „State in URL-Suchparametern verwalten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „State in URL-Suchparametern verwalten“?
Synchronisieren Sie Filter, Sortierung und Pagination mit useSearchParams mit der URL. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um React Academy zu starten?
Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „State in URL-Suchparametern verwalten“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?
Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Verschachtelte Routes und Outlet-Layouts
- Loader und Actions (Data Router API)
- Geschützte Routes und Auth-Guards
- State in URL-Suchparametern verwalten