@kamelot43

Как в React брать значения из адресной строки и отправлять запрос?

Ребята, добрый день. В разработке React-приложение. Есть страницы поиска с разными фильтрами. При передачи данных в адресную строку браузера и переходе на страницу - должны применятся фильтры для поиска , отправиться запрос на сервер и отрисовать на странице данные по выбранным фильтрам. Какой может быть подход для реализации этой задачи ?
Перед загрузкой страницы мы смотрим есть параметры после знака '?', если да, то разбираем эту строку , формируем объект с запросом , отправляем запрос методом axios для получения данных ? пока есть такая идея, но такой алгоритм мне кажется сложным , особенно этап разбить строку и сформировать из нее объект для запроса axios. подскажите пожалуйста есть более элегантное решение этого кейса или похожие примеры, где можно что-то подсмотреть ? заранее спасибо.

5fe45a63cc660120564536.png
  • Вопрос задан
  • 35 просмотров
Пригласить эксперта
Ответы на вопрос 2
VIKINGVyksa
@VIKINGVyksa
front-end developer
Привет, используйте конструктор URL, он разобьет вам url на составные части, это облегчит вам этап работы с адресом.

var url = new URL('https://hello.com?name=alex'); // or document.location
url.searchParams.get('name') // ~> alex
Ответ написан
magerrrr
@magerrrr
JS Software Engineer
Query-string создана для упрощения работы с адресной строкой всех браузеров.

Использование:

const queryString = require('query-string');
 
queryString.parseUrl('https://foo.bar?foo=bar');
//=> {url: 'https://foo.bar', query: {foo: 'bar'}}
 
queryString.parseUrl('https://foo.bar?foo=bar#xyz', {parseFragmentIdentifier: true});
//=> {url: 'https://foo.bar', query: {foo: 'bar'}, fragmentIdentifier: 'xyz'}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
28 янв. 2021, в 03:43
2000 руб./за проект
28 янв. 2021, в 02:42
120000 руб./в час
28 янв. 2021, в 01:43
20000 руб./за проект