Как анализировать строку запроса в response-router v4

В response-router v3 я мог получить к нему доступ с помощью props.location.query.foo (если текущее местоположение было ?foo=bar)

В [email protected] props.location только имеет props.location.search с строкой вроде ?foo=bar&other=thing.

Возможно, мне нужно вручную разобрать и деконструировать эту строку, чтобы найти значение для foo или other.

Скриншот console.log(this.props): (Обратите внимание, как от ?artist=band Здесь я хотел бы получить отдачу от artist, который является значением band)

Ответ 1

Похоже, вы уже считали правильным. Возможность синтаксического анализа строк запроса была взята из V4, поскольку на протяжении многих лет были запрошены различные варианты реализации. При этом команда решила, что было бы лучше, если бы пользователи решили, как выглядит эта реализация. Мы рекомендуем импортировать строку запроса lib. Тот, о котором вы упоминали, до сих пор отлично подействовал на меня.

const queryString = require('query-string');

const parsed = queryString.parse(props.location.search);

Вы также можете использовать new URLSearchParams если хотите что-то родное, и оно работает для ваших нужд

const search = props.location.search; // could be '?foo=bar'
const params = new URLSearchParams(search);
const foo = params.get('foo'); // bar

Вы можете больше узнать о решении здесь

Ответ 2

При создании оптимизированной производственной сборки при использовании модуля строки запроса вы можете получить следующую ошибку.

Не удалось минимизировать код из этого файла:./node_modules/query-string/index.js:8

Чтобы преодолеть это, любезно используйте альтернативный модуль, называемый stringquery, который делает тот же самый процесс без каких-либо проблем при запуске сборки.

import querySearch from "stringquery";

var query = querySearch(this.props.location.search);

Спасибо.

Ответ 3

Рад, что я нашел этот пост. Спасибо за ссылки, через пару часов я наконец обновил свой код.

Для тех, кто использует строку запроса, вам, возможно, придется сделать что-то вроде

var nameYouWant = queryString.parse(this.props.location.search).nameYouWant;

Это произошло в моем случае, и this.props.location.search.theUrlYouWant отказался бы работать. Второй вариант, упомянутый Тайлером, также работал на меня с некоторой подобной настройкой.

Ответ 4

Я предлагаю свою небольшую ES6 формы ES6, потрясающую, легкую и полезную:

getQueryStringParams = query => {
    return query
        ? (/^[?#]/.test(query) ? query.slice(1) : query)
            .split('&')
            .reduce((params, param) => {
                    let [key, value] = param.split('=');
                    params[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : '';
                    return params;
                }, {}
            )
        : {}
};

Все здесь, надеюсь помочь вам.