javascript / intermediate
Snippet
Synchronisierung des Suchstatus mit URL-Parametern
Das Speichern von UI-Zuständen wie Suchanfragen in der URL macht die Seite teilbar und unterstützt die Zurück-Schaltfläche des Browsers. Die Option { scroll: false } verhindert das Springen der Seite nach oben bei Navigations-Updates.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { useRouter, useSearchParams } from 'next/navigation';export function SearchBar() {const router = useRouter();const searchParams = useSearchParams();const handleSearch = (term: string) => {const params = new URLSearchParams(searchParams);if (term) params.set('q', term); else params.delete('q');router.push(`?${params.toString()}`, { scroll: false });};return <input defaultValue={searchParams.get('q') || ''} onChange={(e) => handleSearch(e.target.value)} />;}
nextjs
Erklärung
1
const params = new URLSearchParams(searchParams);
Erstellt eine veränderbare Kopie der aktuellen URL-Suchparameter.
2
router.push(`?${params.toString()}`, { scroll: false });
Aktualisiert die URL ohne vollständigen Neuladen oder Scrollen nach oben.
3
defaultValue={searchParams.get('q') || ''}
Initialisiert das Eingabefeld beim Laden mit dem Wert aus der URL.