0

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

введите сюда описание изображения

0

2 ответа 2

1
Для решения этой проблемы я знаю два варианта, которыми хочу поделиться.

 - Вы можете использовать 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

Надеюсь это поможет вам.
0

Используйте хук useLocation и парсер адресной строки query-string

const location = useLocation();
const query = queryString.parse(location.search);

На выходе будет объект, который можно передать в запрос.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.