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

Question

[kamelot43]

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

Answer 1

[Andrey Dyrkov]

Привет, используйте конструктор URL, он разобьет вам url на составные части, это облегчит вам этап работы с адресом.

var url = new URL('https://hello.com?name=alex'); // or document.location
url.searchParams.get('name') // ~> alex

Answer 2

[Kirill Mager]

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'}