React Academy · Lekcja

Zarządzanie stanem w parametrach wyszukiwania URL

Synchronizowanie filtrów, sortowania i paginacji z adresem URL za pomocą useSearchParams.

Lekcja 4 z 413 kroki

Zarządzanie stanem w parametrach wyszukiwania URL to bezpłatna lekcja React Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.

Dlaczego przechowywać stan w adresie URL

Filtry, zapytania wyszukiwania, kolejność sortowania i paginacja powinny znajdować się w adresie URL, aby użytkownicy mogli dodawać widoki do zakładek, udostępniać je i wracać do tego samego widoku bez utraty stanu.

Hook useSearchParams

useSearchParams() zwraca bieżącą instancję URLSearchParams oraz funkcję ustawiającą, podobnie jak useState, ale opiera się na ciągu zapytania adresu 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);
  // ...
}

Odczytywanie pojedynczego parametru

Użyj searchParams.get('key'), aby odczytać wartość. Jeśli parametr nie istnieje, zwracana jest wartość null, dlatego należy podać wartość zastępczą.

const sort = searchParams.get('sort') ?? 'name';
const order = searchParams.get('order') ?? 'asc';

Zapisywanie parametrów bez nawigacji

Wywołaj setSearchParams() z nowym obiektem lub funkcją aktualizującą, aby zmienić parametry. React Router aktualizuje adres URL i ponownie renderuje komponent bez pełnej nawigacji.

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>;
}

Zachowywanie innych parametrów podczas aktualizacji

Użyj formy setSearchParams z funkcją aktualizującą, aby modyfikować tylko parametry, które zamierzasz zmienić, pozostawiając wszystkie pozostałe bez zmian.

setSearchParams(prev => {
  prev.set('q', newQuery);
  // 'sort' and 'page' are unchanged
  return prev;
});

Synchronizowanie pola wejściowego z parametrami wyszukiwania

Steruj wartością pola wejściowego za pomocą parametru adresu URL i aktualizuj adres URL po zmianie, aby zachować ich synchronizację.

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;
      })}
    />
  );
}

Wartości logiczne w parametrach wyszukiwania

Użyj obecności lub braku parametru (albo ciągu '1'/'0'), aby reprezentować logiczny stan interfejsu, taki jak otwarty panel lub aktywne filtry.

const showFilters = searchParams.has('filters');

const toggleFilters = () => {
  setSearchParams(prev => {
    if (prev.has('filters')) prev.delete('filters');
    else prev.set('filters', '1');
    return prev;
  });
};

Tablice wartości w parametrach wyszukiwania

URLSearchParams obsługuje wiele wartości tego samego klucza. Użyj getAll('key'), aby odczytać je jako tablicę.

// 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);

Zastępowanie a dodawanie do historii

Przekaż { replace: true } jako drugi argument do setSearchParams, aby zmiany filtrów nie zapełniały stosu historii przeglądarki.

setSearchParams(prev => { prev.set('q', val); return prev; }, { replace: true });

Wyprowadzanie stanu z parametrów

Oblicz wartości pochodne (takie jak sparsowane liczby całkowite lub zweryfikowane typy wyliczeniowe) z surowych parametrów tekstowych na początku komponentu, aby bezpiecznie używać ich w dalszej części.

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';

Nawigowanie za pomocą parametrów wyszukiwania

Użyj właściwości search elementu Link lub obiektu to, aby przejść do adresu URL z określonymi parametrami zapytania.

<Link to={{ pathname: '/products', search: '?sort=price&order=asc' }}>
  Sort by Price
</Link>

Szybki sprawdzian

Jaka metoda URLSearchParams odczytuje wszystkie wartości powtarzającego się klucza, takiego jak ?tag=react&tag=ts?

Odpowiedz w interaktywnej lekcji

Podsumowanie

useSearchParams() synchronizuje stan komponentu z ciągiem zapytania adresu URL. Używaj formy z funkcją aktualizującą, aby zachować inne parametry, { replace: true }, aby uniknąć nadmiernego rozrastania historii, oraz getAll() dla parametrów przyjmujących wartości tablicowe.

Bezpłatny start

Ucz się React dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 88
Lekcje: 324

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Zarządzanie stanem w parametrach wyszukiwania URL” jest bezpłatna?

Tak — pełny tekst „Zarządzanie stanem w parametrach wyszukiwania URL” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Zarządzanie stanem w parametrach wyszukiwania URL”?

Synchronizowanie filtrów, sortowania i paginacji z adresem URL za pomocą useSearchParams. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć React Academy?

Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Zarządzanie stanem w parametrach wyszukiwania URL”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?

Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Zagnieżdżone trasy i układy Outlet
Loadery i akcje (Data Router API)
Chronione trasy i strażnicy uwierzytelniania
Zarządzanie stanem w parametrach wyszukiwania URL

← Powrót do React Academy