Как разобрать строку запроса в react-router v4

Похоже, вы уже предположили правильно. Возможность анализировать строки запроса была исключена из 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

Подробнее о решении можно прочитать здесь

Я предлагаю свою маленькую функцию формы 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;
                }, {}
            )
        : {}
};

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

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

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

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

import querySearch from "stringquery";

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

Спасибо.

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

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

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

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

Использование стороннего пакета является излишним для простых решений

componentDidMount() {
        const query = new URLSearchParams(
            this.props.location.search
        );

        let data= {};

        for (let params of query.entries()) {
            data[params[0]] = +params[1];
        }
        this.setState({ urldata: data});
    }

это просто преобразует данные URL в объект.

Я удивлен, что никто не упомянул UrlSearchParams и .get метод.

вместо установки пакета вы можете использовать простую функцию для извлечения параметров запроса.

//Param Extractor
const parseParams = (params = "") => {
  const rawParams = params.replace("?", "").split("&");
  const extractedParams = {};
  rawParams.forEach((item) => {
    item = item.split("=");
    extractedParams[item[0]] = item[1];
  });
  return extractedParams;
};

//Usage
const params = parseParams(this.props?.location?.search); // returns an object like:
// {id:1,name:john...}