Query-параметры

import { useSearchParams } from 'react-router-dom';

function Posts() {
    const [searchParams, setSearchParams] = useSearchParams();

    const page = Number(searchParams.get('page') ?? 1);
    const sort = searchParams.get('sort') ?? 'date';

    return (
        <>
            <p>Страница: {page}</p>
            <p>Сортировка: {sort}</p>
        </>
    );
}

searchParams.get('page');         // '2' или null
searchParams.getAll('tag');       // массив
searchParams.has('page');         // true/false

function nextPage() {
    setSearchParams({ page: String(page + 1), sort });
}

setSearchParams((prev) => {
    prev.set('page', String(page + 1));
    return prev;
});

setSearchParams((prev) => {
    prev.delete('sort');
    return prev;
});

<Link to="/posts?tag=js&tag=react">Метки</Link>

const tags = searchParams.getAll('tag'); // ['js', 'react']

<Link to={{ pathname: '/posts', search: '?page=2' }}>Страница 2</Link>

<Link to={`/posts?page=${page + 1}`}>Дальше</Link>

function Posts() {
    const [searchParams, setSearchParams] = useSearchParams();

    const filters = {
        search: searchParams.get('search') ?? '',
        status: searchParams.get('status') ?? 'all',
        page: Number(searchParams.get('page') ?? 1),
    };

    function updateFilter(key: string, value: string) {
        setSearchParams((prev) => {
            if (value) prev.set(key, value);
            else prev.delete(key);
            if (key !== 'page') prev.set('page', '1');
            return prev;
        });
    }

    return (
        <>
            <input
                value={filters.search}
                onChange={(e) => updateFilter('search', e.target.value)}
            />
            <select
                value={filters.status}
                onChange={(e) => updateFilter('status', e.target.value)}
            >
                <option value="all">Все</option>
                <option value="published">Опубликованные</option>
                <option value="draft">Черновики</option>
            </select>
        </>
    );
}

import { useLocation } from 'react-router-dom';

const location = useLocation();
const params = new URLSearchParams(location.search);