Ответ 1

Примечание: Копировать/Вставить из комментария. Обязательно понравился оригинальный пост!

Запись в es6 и использование реакции 0.14.6/реакция-маршрутизатор 2.0.0-rc5. Я использую эту команду для поиска параметров запроса в моих компонентах:

this.props.location.query

Он создает хэш всех доступных параметров запроса в URL.

Обновление:

Для React-Router v4 см. этот ответ. В основном, используйте this.props.location.search, чтобы получить строку запроса и проанализировать пакет query-string или URLSearchParams:

const params = new URLSearchParams(paramsString); 
const tags = params.get('tags');

Ответ 2

OLD (pre v4):

Запись в es6 и использование реакции 0.14.6/response-router 2.0.0-rc5. Я использую эту команду для поиска параметров запроса в моих компонентах:

this.props.location.query

Он создает хэш всех доступных параметров запроса в URL-адресе.

UPDATE (React Router v4 +):

this.props.location.query в React Router 4 был удален (в настоящее время используется v4.1.1) подробнее об этой проблеме: https://github.com/ReactTraining/react-router/issues/4410

Похоже, они хотят, чтобы вы использовали свой собственный метод для анализа параметров запроса, в настоящее время используя эту библиотеку, чтобы заполнить пробел: https://github.com/sindresorhus/query-string

Ответ 3

Вышеуказанные ответы не будут работать в react-router v4. Вот что я сделал для решения проблемы -

Первый Установите query-string, который потребуется для синтаксического анализа.

npm install -save query-string

Теперь в маршрутизируемом компоненте вы можете получить доступ к строке неисследованного запроса, подобной этой

this.props.location.search

Вы можете перекрестно проверить его, войдя в консоль.

Наконец проанализировать доступ к параметрам запроса

const queryString = require('query-string');
var parsed = queryString.parse(this.props.location.search);
console.log(parsed.param); // replace param with your own 

Итак, если запрос похож на ?hello=world

console.log(parsed.hello) будет записываться world

Ответ 4

обновление 2017.12.25

"react-router-dom": "^4.2.2"

url like

BrowserHistory: http://localhost:3000/demo-7/detail/2?sort=name

HashHistory: http://localhost:3000/demo-7/#/detail/2?sort=name

с query-string зависимость:

this.id = props.match.params.id;
this.searchObj = queryString.parse(props.location.search);
this.from = props.location.state.from;

console.log(this.id, this.searchObj, this.from);

результаты:

2 {sort: "name"} home

"react-router": "^2.4.1"

Урл как http://localhost:8080/react-router01/1?name=novaline&age=26

const queryParams = this.props.location.query;

queryParams - это объект, содержащий параметры запроса: {name: novaline, age: 26}

Ответ 5

  С пакетом stringquery:

import qs from "stringquery";

const obj = qs("?status=APPROVED&page=1limit=20");  
// > { limit: "10", page:"1", status:"APPROVED" }

With query-string Package:

import qs from "query-string";
const obj = qs.parse(this.props.location.search);
console.log(obj.param); // { limit: "10", page:"1", status:"APPROVED" } 

No Package:

const convertToObject = (url) => {
  const arr = url.slice(1).split(/&|=/); // remove the "?", "&" and "="
  let params = {};

  for(let i = 0; i < arr.length; i += 2){
    const key = arr[i], value = arr[i + 1];
    params[key] = value ; // build the object = { limit: "10", page:"1", status:"APPROVED" }
  }
  return params;
};


const uri = this.props.location.search; // "?status=APPROVED&page=1&limit=20"

const obj = convertToObject(uri);

console.log(obj); // { limit: "10", page:"1", status:"APPROVED" }


// obj.status
// obj.page
// obj.limit

Надеюсь, это поможет :)

Удачного кодирования!

Ответ 6

Прочитав другие ответы (сначала by @duncan-finney, а затем @Marrs), я решил найти журнал изменений, в котором объясняется идиоматический способ реагирования-маршрутизатора 2.x. документация по использованию местоположения (которая вам нужна для запросов) в компонентах фактически противоречит фактическому коду. Поэтому, если вы будете следовать их советам, вы получите большие сердитые предупреждения, подобные этому:

Warning: [react-router] `context.location` is deprecated, please use a route component `props.location` instead.

Оказывается, вы не можете иметь свойство контекста, называемое местоположением, которое использует тип местоположения. Но вы можете использовать свойство context, называемое loc, которое использует тип местоположения. Таким образом, решение представляет собой небольшую модификацию на их источнике следующим образом:

const RouteComponent = React.createClass({
    childContextTypes: {
        loc: PropTypes.location
    },

    getChildContext() {
        return { location: this.props.location }
    }
});

const ChildComponent = React.createClass({
    contextTypes: {
        loc: PropTypes.location
    },
    render() {
        console.log(this.context.loc);
        return(<div>this.context.loc.query</div>);
    }
});

Вы также можете передать только те части объекта местоположения, которые хотите, чтобы ваши дети получали одинаковое преимущество. Он не изменил предупреждение, чтобы перейти к типу объекта. Надеюсь, что это поможет.

Ответ 7

Простое решение для js:

queryStringParse = function(string) {
    let parsed = {}
    if(string != '') {
        string = string.substring(string.indexOf('?')+1)
        let p1 = string.split('&')
        p1.map(function(value) {
            let params = value.split('=')
            parsed[params[0]] = params[1]
        });
    }
    return parsed
}

И вы можете позвонить из любого места, используя:

var params = this.queryStringParse(this.props.location.search);

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

Ответ 8

"react-router-dom": "^5.0.0",

вам не нужно добавлять какой-либо дополнительный модуль только в ваш компонент с таким URL-адресом, как этот:

http://localhost:3000/#/?authority"

Вы можете попробовать следующий простой код:

    const search =this.props.location.search;
    const params = new URLSearchParams(search);
    const authority = params.get('authority'); //

Ответ 9

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

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

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

import querySearch from "stringquery";

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