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

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

на react-router-dom@4.0.0 props.location только props.location.search with-это строка типа ?foo=bar&other=thing.

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

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

19
react-router react-router-dom reactjs

4 ответов

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

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

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

54

при создании оптимизированной производственной сборки при использовании запрос-строку модуль.

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

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

import querySearch from "stringquery";

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

спасибо.

13

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

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

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

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

4

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

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

0