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