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);

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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