İstemci tarafında uygulamam için react ve react-router kullanıyorum. Aşağıdaki sorgu parametrelerini aşağıdaki gibi bir url'den nasıl alacağımı çözemiyorum:

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

Rotalarım şöyle görünüyor (yol tamamen yanlış biliyorum):

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>
);

Rotam iyi çalışıyor ancak istediğim parametreleri almak için yolu nasıl biçimlendireceğimden emin değilim. Bu konudaki herhangi bir yardım için minnettarız!

Not: Yorumdan Kopyala / Yapıştır. Orijinal gönderiyi beğendiğinizden emin olun!

Es6 ile yazma ve react 0.14.6 / react-router 2.0.0-rc5 kullanarak. Bileşenlerimdeki sorgu parametrelerini aramak için bu komutu kullanıyorum:

this.props.location.query

Url'de mevcut tüm sorgu parametrelerinin bir karmasını oluşturur.

Güncelleme:

React-Router v4 için bu yanıta bakın . Temel olarak, this.props.location.searchsorgu dizesini almak ve query-stringpaket veya URLSearchParams ile ayrıştırmak için kullanın :

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

ESKİ (v4 öncesi):

Es6 ile yazma ve react 0.14.6 / react-router 2.0.0-rc5 kullanarak. Bileşenlerimdeki sorgu parametrelerini aramak için bu komutu kullanıyorum:

this.props.location.query

Url'de mevcut tüm sorgu parametrelerinin bir karmasını oluşturur.

GÜNCELLEME (React Router v4 +):

React Router 4'teki this.props.location.query kaldırıldı (şu anda v4.1.1 kullanılıyor) burada sorunla ilgili daha fazla bilgi: https://github.com/ReactTraining/react-router/issues/4410

Görünüşe göre, sorgu parametrelerini ayrıştırmak için kendi yönteminizi kullanmanızı istiyorlar, şu anda boşluğu doldurmak için bu kitaplığı kullanıyorlar: https://github.com/sindresorhus/query-string

Yukarıdaki cevaplar işe yaramayacak react-router v4. Sorunu çözmek için yaptığım şey şu:

İlk olarak ayrıştırma için gerekli olacak sorgu dizesini yükleyin .

npm install -save query-string

Şimdi yönlendirilmiş bileşende, bunun gibi çözümlenmemiş sorgu dizesine erişebilirsiniz.

this.props.location.search

Konsolda oturum açarak kontrol edebilirsiniz.

Son olarak sorgu parametrelerine erişmek için ayrıştırın

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

Yani sorgu şöyle ise ?hello=world

console.log(parsed.hello) günlüğe kaydedecek world

güncelleme 2017.12.25

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

url beğenmek

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

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

ile sorgu dizesi bağımlılık:

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);

Sonuçlar:

2 {sort: "name"} home

"react-router": "^2.4.1"

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

const queryParams = this.props.location.query;

queryParams, sorgu parametrelerini içeren bir nesnedir: {name: novaline, age: 26}

Stringquery Paketi ile:

import qs from "stringquery";

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

Sorgu dizesi Paketi ile:

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

Paket Yok:

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

Umarım yardımcı olur :)

Mutlu kodlamalar!

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

sadece bileşeninize, bunun gibi bir url adresi olan herhangi bir ek modül eklemenize gerek yoktur:

http: // localhost: 3000 / # /? otorite '

aşağıdaki basit kodu deneyebilirsiniz:

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

Diğer cevapları okuduktan sonra (Önce @ duncan-finney ve sonra @Marrs tarafından) Bunu çözmenin deyimsel react-router 2.x yolunu açıklayan değişiklik günlüğünü bulmaya başladım. Yeri kullanımıyla ilgili dokümantasyon bileşenlerindeki (eğer sorgular için ihtiyaç olan) aslında gerçek kod çelişiyor. Yani eğer onların tavsiyesine uyarsanız, şu gibi büyük öfkeli uyarılar alırsınız:

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

Konum türünü kullanan konum adında bir bağlam özelliğine sahip olamayacağınız ortaya çıktı. Ancak konum türünü kullanan loc adında bir bağlam özelliğini kullanabilirsiniz. Dolayısıyla çözüm, kaynaklarında aşağıdaki gibi küçük bir değişikliktir:

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>);
    }
});

Ayrıca konum nesnesinin sadece çocuklarınızda olmasını istediğiniz kısımları da aynı faydayı elde edebilir. Nesne türüne geçmek için uyarıyı değiştirmedi. Umarım yardımcı olur.

Basit js çözümü:

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
}

Ve bunu kullanarak her yerden arayabilirsiniz:

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

Bu yardımcı olur umarım.

Sorgu dizesi modülünü kullanırken optimize edilmiş bir üretim yapısı oluştururken aşağıdaki hatayı alabilirsiniz .

Bu dosyadaki kod küçültülemedi: ./node_modules/query-string/index.js:8

Bunun üstesinden gelmek için, yapıyı çalıştırırken aynı işlemi sorunsuz bir şekilde yapan stringquery adlı alternatif modülü kullanın .

import querySearch from "stringquery";

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