Я використовую реактор та реактор-маршрутизатор для свого застосування на стороні клієнта. Я не можу зрозуміти, як отримати такі параметри запиту з URL-адреси, як:

http://xmen.database/search#/?status=APPROVED&page=1&limit=20

Мої маршрути виглядають приблизно так (шлях я абсолютно невірний):

var routes = (
<Route>
    <DefaultRoute handler={SearchDisplay}/>
    <Route name="search" path="?status=:status&page=:page&limit=:limit" handler={SearchDisplay}/>
    <Route name="xmen" path="candidate/:accountId" handler={XmenDisplay}/>
</Route>
);

Мій маршрут працює нормально, але я просто не впевнений, як відформатувати шлях для отримання потрібних параметрів. Вдячні за будь-яку допомогу з цього приводу!

Примітка: Скопіювати / вставити з коментаря. Обов’язково сподобається оригінальний пост!

Написання в 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');

СТАРИЙ (до v4):

Написання в es6 та використання реактора 0,14.6 / реактор-маршрутизатор 2.0.0-rc5. Я використовую цю команду для пошуку параметрів запитів у своїх компонентах:

this.props.location.query

Він створює хеш усіх доступних параметрів запитів у URL-адресі.

ОНОВЛЕННЯ (React Router v4 +):

this.props.location.query в React Router 4 видалено (зараз використовується v4.1.1). Більше про проблему тут: https://github.com/ReactTraining/react-router/isissue/4410

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

Наведені вище відповіді не працюватимуть react-router v4. Ось що я зробив для вирішення проблеми -

Спочатку встановіть рядок запиту, який буде потрібен для розбору.

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

оновлення 2017.12.25

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

URL як

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

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

із залежністю від запиту :

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"

URL як http://localhost:8080/react-router01/1?name=novaline&age=26

const queryParams = this.props.location.query;

queryParams - це об'єкт, що містить параметри запиту: {name: novaline, age: 26}

З пакетом stringquery:

import qs from "stringquery";

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

З пакетом рядків запитів:

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

Немає пакету:

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

Сподіваюся, що це допомагає :)

Щасливого кодування!

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

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

http: // localhost: 3000 / # /? повноваження "

ви можете спробувати наступний простий код:

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

Прочитавши інші відповіді (Спочатку @ duncan-finney, а потім @Marrs), я вирішив знайти журнал змін, який пояснює ідіоматичний 2.x спосіб вирішення цього питання. Документація по використанню розташування (що вам потрібно для запитів) в компонентах фактично суперечать фактичному коду. Тож якщо ви дотримуєтесь їхніх порад, ви отримуєте великі гнівні попередження, як це:

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

Виявляється, ви не можете мати властивість контексту, що називається location, що використовує тип місцезнаходження. Але ви можете використовувати властивість контексту під назвою 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>);
    }
});

Ви також можете передавати вниз лише ті частини об'єкта, який ви хочете, щоб ваші діти отримували однакові переваги. Це не змінило попередження про зміну типу об’єкта. Сподіваюся, що це допомагає.

Просте рішення 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);

Сподіваюся, це допомагає.

Ви можете отримати таку помилку під час створення оптимізованої збірки виробництва при використанні модуля запиту рядків .

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

Щоб подолати це, будь ласка, використовуйте альтернативний модуль під назвою stringquery, який добре виконує той самий процес без будь-яких проблем під час запуску збірки.

import querySearch from "stringquery";

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