Projemde react-router-dom 4.0.0-beta.6 kullanıyorum. Aşağıdaki gibi bir kodum var:

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

Ve HomePagebileşende sorgu parametreleri almak istiyorum . Ben location.searchşuna benzeyen bir param buldum : ?key=valueyani ayrıştırılmamış.

React-router v4 ile sorgu parametreleri almanın doğru yolu nedir?

Yıllar boyunca farklı uygulamaları desteklemek için talepler olduğu için sorgu dizelerini ayrıştırma yeteneği V4'ten çıkarıldı. Ekip, bununla birlikte, kullanıcıların bu uygulamanın neye benzediğine karar vermesinin en iyisi olduğuna karar verdi. Bir sorgu dizesi kütüphanesini içe aktarmanızı öneririz. İşte kullandığım biri

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

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

new URLSearchParamsYerel bir şey istiyorsanız da kullanabilirsiniz ve ihtiyaçlarınız için çalışır

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

Sen karar hakkında daha fazla bilgi bulabilirsiniz burada

Verilen cevap sağlam.

Sorgu dizesi yerine qs modülünü kullanmak istiyorsanız (bunlar popülerlik açısından eşittir), işte sözdizimi:

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

İgnoreQueryPrefix seçeneği lider soru işareti göz ardı etmektir.

Kabul edilen cevap iyi çalışıyor ancak ek bir paket kurmak istemiyorsanız, bunu kullanabilirsiniz:

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

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

getUrlParameter('key');

dönecek value

Başka bir yararlı yaklaşım, kutudan çıktığı URLSearchParamsgibi kullanmak olabilir ;

  let { search } = useLocation();

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

Temiz, okunabilir ve modül gerektirmez. Aşağıda daha fazla bilgi;

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

React router v4 için parametreler hakkında araştırma yapıyordum ve v4 için kullanmadılar, react router v2 / 3 gibi değil. Başka bir işlevi bırakacağım - belki birileri onu yararlı bulacaktır. Yalnızca es6 veya düz javascript'e ihtiyacınız var.

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

Ayrıca bu işlev geliştirilebilir

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

Bunu az önce yaptım, bu nedenle daha düşük bir sürümden yönlendirici v4 veya daha yüksek bir sürümden yanıt vermek için güncelleme yaparsanız, tüm kod yapısını (redux yönlendirici deposundan sorgu kullandığınız yerde) değiştirmeniz gerekmez.

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

Çok kolay

sadece kanca kullan useParams()

Misal:

Yönlendirici :

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

Bileşeninizde :

export default function UserComponent() {

  const { id } = useParams();

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

Herhangi bir pakete ihtiyaç duymadan:

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

Ardından ilgili parametrelere ulaşabilirsiniz. params.id