Хук useSearchParams

Читання параметрів з рядка адреси

Для читання та зміни рядка запиту у React Router є хук useSearchParams, який є невеликою обгорткою над вбудованим у браузер класом [URLSearchParams] Він повертає масив із двох значень: об'єкт параметрів рядка запиту (примірник URLSearchParams) для поточного URL та функцію оновлення рядка запиту. Для отримання значень параметрів є метод URLSearchParams.get(key), який чекає на ім'я параметра і повертає його значення або null якщо у рядку запиту немає такого параметра.

// src/pages/Products.jsx
import { useSearchParams } from "react-router-dom";
const Products = () => {
const [searchParams] = useSearchParams();
const name = searchParams.get("name");
const color = searchParams.get("color");
const maxPrice = searchParams.get("maxPrice");
return (
<div>
<p>Name: {name}</p>
<p>Color: {color}</p>
<p>Maximum price: {maxPrice}</p>
</div>
);
};

Параметри як об'єкт

Якщо рядок запиту містить кілька параметрів, постійно використовувати метод get() може бути незручно. Ось простий спосіб перетворити екземпляр класу URLSearchParams у звичайний об'єкт із властивостями.

const [searchParams] = useSearchParams();
const params = useMemo(
() => Object.fromEntries([...searchParams]),
[searchParams]
);
const { name, maxPrice, inStock } = params;

Встановлення параметра у рядок адреси

const [searchParams, setSearchParams] = useSearchParams();
const name = searchParams.get("name");
.
.
setSearchParams({ name: inputValue });

Відстеження змін у параметрах рядка адреси

можна зреагувати на це і запустити ефект.

const App = () => {
const [user, setUser] = useState(null);
const [searchParams, setSearchParams] = useSearchParams();
const username = searchParams.get("username");
useEffect(() => {
// Тут виконуємо асинхронну операцію,
// наприклад HTTP-запит за інформацією про користувача
if (username === "") return;
async function fetchUser() {
const user = await FakeAPI.getUser(username);
setUser(user);
}
fetchUser();
}, [username]);
const handleSubmit = e => {
e.preventDefault();
const form = e.currentTarget;
setSearchParams({ username: form.elements.username.value });
form.reset();
};
return (
<>
<form onSubmit={handleSubmit}>
<input type="text" name="username" />
<button type="submit">Search</button>
</form>
{user && <UserInfo user={user} />}
</>
);
};