Ребята, добрый день. В разработке React-приложение. Есть страницы поиска с разными фильтрами. При передачи данных в адресную строку браузера и переходе на страницу - должны применяться фильтры для поиска , отправиться запрос на сервер и от рисовать на странице данные по выбранным фильтрам. Какой может быть подход для реализации этой задачи ? Перед загрузкой страницы мы смотрим есть параметры после знака '?', если да, то разбираем эту строку , формируем объект с запросом , отправляем запрос методом axios для получения данных ? пока есть такая идея, но такой алгоритм мне кажется сложным , особенно этап разбить строку и сформировать из нее объект для запроса axios. подскажите пожалуйста есть более элегантное решение этого кейса или похожие примеры, где можно что-то подсмотреть ? заранее спасибо.
2 ответа
Для решения этой проблемы я знаю два варианта, которыми хочу поделиться.
- Вы можете использовать browser api.
- Использовать стороннее api.
1.
http://localhost:3000?token=123
Мы хотим получить 123
const query = new URLSearchParams(this.props.location.search);
const token = query.get('token')
console.log(token)//123
2. Используя стороннюю библиотеку 'query-string'.
http://localhost:3000?token=123
Мы хотим получить {token: 123}
Сначала установим
npm i query-string
import queryString from 'query-string'
const value = queryString.parse(this.props.location.search);
console.log('Все параметры', value) //{token: 123}
const token = value.token;
console.log('token', token) //123
Надеюсь это поможет вам.
Используйте хук useLocation
и парсер адресной строки query-string
const location = useLocation();
const query = queryString.parse(location.search);
На выходе будет объект, который можно передать в запрос.