Cara mendapatkan parameter kueri di react-router v4


89

Saya menggunakan react-router-dom 4.0.0-beta.6 dalam proyek saya. Saya memiliki kode seperti berikut:

<Route exact path="/home" component={HomePage}/>

Dan saya ingin mendapatkan parameter kueri dalam HomePagekomponen. Saya telah menemukan location.searchparam, yang terlihat seperti ini ?key=value:, jadi tidak diurai.

Apa cara yang benar untuk mendapatkan parameter kueri dengan react-router v4?

Jawaban:


184

Kemampuan untuk mengurai string kueri diambil dari V4 karena ada permintaan selama bertahun-tahun untuk mendukung implementasi yang berbeda. Dengan itu, tim memutuskan akan lebih baik bagi pengguna untuk memutuskan seperti apa penerapan itu. Sebaiknya impor string kueri lib. Ini salah satu yang saya gunakan

const queryString = require('query-string');

const parsed = queryString.parse(props.location.search);

Anda juga dapat menggunakan new URLSearchParamsjika Anda menginginkan sesuatu yang asli dan berfungsi untuk kebutuhan Anda

const params = new URLSearchParams(props.location.search);
const foo = params.get('foo'); // bar

Anda dapat membaca lebih lanjut tentang keputusan tersebut di sini


12
Jangan gunakan URLSearchParams tanpa polyfill. Mulai Maret 2018, Googlebot menggunakan Chrome 41 ( developers.google.com/search/docs/guides/rendering ) yang tidak mendukung URLSearchParams dan aplikasi Anda akan rusak jika digunakan di jalur penting ( caniuse.com/#feat=urlsearchparams ).
Joshua Robinson

15

Jawaban yang diberikan pasti.

Jika Anda ingin menggunakan modul qs daripada query-string (popularitasnya hampir sama), berikut adalah sintaksnya:

const query = qs.parse(props.location.search, {
  ignoreQueryPrefix: true
})

The ignoreQueryPrefix pilihan adalah untuk mengabaikan tanda tanya terkemuka.


1
Bagus. pada Januari 2019, qs memiliki 12 juta unduhan mingguan vs 2,7 juta untuk kueri-string.
oyalhi

6

Jawaban yang diterima berfungsi dengan baik tetapi jika Anda tidak ingin menginstal paket tambahan, Anda dapat menggunakan ini:

getUrlParameter = (name) => {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    let regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    let results = regex.exec(window.location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
  };

Diberikan http://www.google.co.in/?key=value

getUrlParameter('key');

akan kembali value


Thanks a ton mate .. library "query-string" tidak berfungsi untuk saya karena beberapa alasan, tetapi solusi Anda bekerja dengan sangat baik. Saya menggunakan "react-dom": "^ 16.0.0", "react-router": "^ 4.2.0", "react-router-dom": "^ 4.2.2" dan "query-string": "^ 5.0.1",
Rohan_Paul

ini hanya mengasumsikan Anda memiliki satu parameter di string kueri Anda. OP dengan jelas menanyakan cara mendapatkan parameter kueri - dan itulah yang dilakukan oleh modul npm yang disebutkan. Ubah ini menjadi fungsi yang mengembalikan objek pasangan kunci / nilai dari string kueri dan itu akan sangat berguna!
Andy Lorenz

@AndyLorenz ini bahkan berfungsi ketika Anda memiliki beberapa parameter kueri, panggil fungsi yang diberikan dengan kunci yang nilainya ingin Anda dapatkan. Metode ya juga dapat diubah untuk memberikan peta nilai kunci.
kartikag01

itu akan berhasil tetapi bukan solusi yang baik @Kartik_Agarwal. (a) Ini akan membutuhkan beberapa eksekusi dari kode yang pada dasarnya sama (berpotensi mahal), (b) variabel terpisah perlu digunakan untuk setiap parameter, sedangkan idealnya Anda akan mengisi objek pasangan kunci / nilai, (c) itu membutuhkan Anda untuk mengetahui nama parameter Anda, dan pemeriksaan tambahan untuk melihat apakah mereka ada atau tidak. Jika ini adalah kode saya, saya akan mencari regex yang dapat mengambil semua parameter secara berulang, tetapi saya harus mengakui regex membuat telinga saya berdarah!
Andy Lorenz


5

Saya sedang meneliti tentang params untuk react router v4, dan mereka tidak menggunakannya untuk v4, tidak seperti react router v2 / 3. Saya akan meninggalkan fungsi lain - mungkin seseorang akan merasa terbantu. Anda hanya membutuhkan es6 atau javascript biasa.

function parseQueryParams(query) {
  //You get a '?key=asdfghjkl1234567890&val=123&val2&val3=other'
  const queryArray = query.split('?')[1].split('&');
  let queryParams = {};
  for (let i = 0; i < queryArray.length; i++) {
    const [key, val] = queryArray[i].split('=');
    queryParams[key] = val ? val : true;
  }
  /* queryParams = 
     {
      key:"asdfghjkl1234567890",
      val:"123",
      val2:true,
      val3:"other"
     }
  */
  return queryParams;
}

Selain itu, fungsi ini dapat ditingkatkan


2

Eh?

queryfie(string){
    return string
        .slice(1)
        .split('&')
        .map(q => q.split('='))
        .reduce((a, c) => { a[c[0]] = c[1]; return a; }, {});
}

queryfie(this.props.location.search);

0

Saya baru saja membuat ini jadi tidak perlu mengubah seluruh struktur kode (di mana Anda menggunakan kueri dari toko router redux) jika Anda memperbarui untuk mereaksikan router v4 atau lebih tinggi dari versi yang lebih rendah.

https://github.com/saltas888/react-router-query-middleware


1
Tautan ke solusi diperbolehkan, tetapi harap pastikan jawaban Anda berguna tanpanya: tambahkan konteks di sekitar tautan sehingga sesama pengguna Anda akan tahu apa itu dan mengapa itu ada, kemudian kutip bagian paling relevan dari halaman Anda ' menautkan ulang jika halaman target tidak tersedia. Jawaban yang tidak lebih dari sebuah tautan dapat dihapus .
mrun

-1

Sangat mudah

gunakan saja kail useParams()

Contoh:

Router :

<Route path="/user/:id" component={UserComponent} />

Dalam komponen Anda :

export default function UserComponent() {

  const { id } = useParams();

  return (
    <>{id}</>
  );
}

Ini tidak berfungsi untuk kasus penggunaan yang dijelaskan dalam pertanyaan (setidaknya tidak dengan React-Router v4: reactrouter.com/web/api/Hooks/useparams ) useParams hanya mengekspos parameter jalur, bukan parameter pencarian.
Bennit

-4

Tanpa membutuhkan paket apa pun:

const params = JSON.parse(JSON.stringify(this.props.match.params));

Kemudian Anda dapat mencapai parameter terkait dengan params.id


3
this.props.match.paramsberisi parameter jalur, pertanyaan ini tentang parameter kueri.
Hubert
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.