Saya menggunakan react dan react-router untuk aplikasi saya di sisi klien. Sepertinya saya tidak tahu cara mendapatkan parameter kueri berikut dari url seperti:

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

Rute saya terlihat seperti ini (jalurnya benar-benar salah, saya tahu):

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

Rute saya berfungsi dengan baik tetapi saya tidak yakin bagaimana memformat jalur untuk mendapatkan parameter yang saya inginkan. Hargai bantuan apa pun dalam hal ini!

Catatan: Salin / Tempel dari komentar. Pastikan untuk menyukai postingan aslinya!

Menulis di es6 dan menggunakan react 0.14.6 / react-router 2.0.0-rc5. Saya menggunakan perintah ini untuk mencari parameter kueri di komponen saya:

this.props.location.query

Ini membuat hash dari semua parameter kueri yang tersedia di url.

Memperbarui:

Untuk React-Router v4, lihat jawaban ini . Pada dasarnya, gunakan this.props.location.searchuntuk mendapatkan string kueri dan parse dengan query-stringpaket atau URLSearchParams :

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

LAMA (sebelum v4):

Menulis di es6 dan menggunakan react 0.14.6 / react-router 2.0.0-rc5. Saya menggunakan perintah ini untuk mencari parameter kueri di komponen saya:

this.props.location.query

Ini membuat hash dari semua parameter kueri yang tersedia di url.

UPDATE (React Router v4 +):

this.props.location.query di React Router 4 telah dihapus (saat ini menggunakan v4.1.1) lebih lanjut tentang masalahnya di sini: https://github.com/ReactTraining/react-router/issues/4410

Sepertinya mereka ingin Anda menggunakan metode Anda sendiri untuk mengurai parameter kueri, saat ini menggunakan pustaka ini untuk mengisi celah: https://github.com/sindresorhus/query-string

Jawaban di atas tidak akan berhasil react-router v4. Inilah yang saya lakukan untuk memecahkan masalah -

Pertama Instal query-string yang akan diperlukan untuk parsing.

npm install -save query-string

Sekarang di komponen yang dirutekan Anda dapat mengakses string kueri yang tidak diurai seperti ini

this.props.location.search

Anda dapat memeriksa silang dengan masuk ke konsol.

Terakhir, parsing untuk mengakses parameter kueri

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

Jadi jika query seperti itu ?hello=world

console.log(parsed.hello) akan masuk world

perbarui 2017.12.25

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

url seperti

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

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

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

hasil:

2 {sort: "name"} home

"react-router": "^2.4.1"

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

const queryParams = this.props.location.query;

queryParams adalah objek yang berisi parameter kueri: {name: novaline, age: 26}

Dengan Paket stringquery:

import qs from "stringquery";

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

Dengan Paket query-string:

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

Tidak Ada Paket:

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

Semoga membantu :)

Selamat membuat kode!

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

Anda tidak perlu menambahkan modul tambahan apa pun hanya di komponen Anda yang memiliki alamat url seperti ini:

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

Anda dapat mencoba kode sederhana berikut:

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

Setelah membaca jawaban lain (Pertama oleh @ duncan-finney dan kemudian oleh @Marrs) saya berangkat untuk menemukan log perubahan yang menjelaskan cara react-router 2.x idiomatik untuk menyelesaikan ini. The dokumentasi menggunakan lokasi (yang Anda butuhkan untuk query) dalam komponen sebenarnya bertentangan dengan kode aktual. Jadi jika Anda mengikuti nasihat mereka, Anda akan mendapatkan peringatan marah besar seperti ini:

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

Ternyata Anda tidak bisa memiliki properti konteks yang disebut lokasi yang menggunakan tipe lokasi. Tapi Anda bisa menggunakan properti konteks yang disebut loc yang menggunakan tipe lokasi. Jadi solusinya adalah modifikasi kecil pada sumbernya sebagai berikut:

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

Anda juga bisa mewariskan hanya bagian-bagian dari objek lokasi yang Anda inginkan agar anak Anda mendapatkan manfaat yang sama. Itu tidak mengubah peringatan untuk mengubah tipe objek. Semoga membantu.

Solusi js sederhana:

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
}

Dan Anda dapat memanggilnya dari mana saja menggunakan:

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

Semoga ini membantu.

Anda mungkin mendapatkan error berikut saat membuat build produksi yang dioptimalkan saat menggunakan modul query-string .

Gagal mengecilkan kode dari file ini: ./node_modules/query-string/index.js:8

Untuk mengatasinya, gunakan modul alternatif bernama stringquery yang melakukan proses yang sama dengan baik tanpa masalah saat menjalankan build.

import querySearch from "stringquery";

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