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?

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

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.

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

Pendekatan lain yang berguna adalah menggunakan out of the box URLSearchParamsseperti ini;

  let { search } = useLocation();

   const query = new URLSearchParams(search);
   const paramField = query.get('field');
   const paramValue = query.get('value');

Bersih, mudah dibaca dan tidak membutuhkan modul. Info lebih lanjut di bawah;

• https://reacttraining.com/react-router/web/example/query-parameters
• https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

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

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

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

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

Tanpa membutuhkan paket apa pun:

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

Kemudian Anda dapat mencapai parameter terkait dengan params.id