Jak uzyskać parametry zapytania w React-router v4

91

W moim projekcie używamreak-router-dom 4.0.0-beta.6. Mam następujący kod:

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

Chcę uzyskać parametry zapytania w HomePagekomponencie. Znalazłem location.searchparametr, który wygląda ?key=valuetak:, więc nie został przeanalizowany.

Jaki jest właściwy sposób uzyskiwania parametrów zapytania za pomocą routera React-router v4?

andrfas
źródło

Odpowiedzi:

184

Możliwość analizowania ciągów zapytań została usunięta z V4, ponieważ przez lata pojawiały się prośby o obsługę różnych implementacji. W związku z tym zespół zdecydował, że najlepiej będzie, jeśli użytkownicy zdecydują, jak wygląda ta implementacja. Zalecamy zaimportowanie ciągu zapytania lib. Oto jeden, którego używam

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

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

Możesz również użyć, new URLSearchParamsjeśli chcesz coś natywnego i działa na Twoje potrzeby

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

Więcej o decyzji przeczytasz tutaj

Tyler McGinnis
źródło
12
Nie używaj URLSearchParams bez polyfill. Od marca 2018 r. Googlebot korzysta z przeglądarki Chrome 41 ( developers.google.com/search/docs/guides/rendering ), która nie obsługuje URLSearchParams, a Twoja aplikacja ulegnie awarii, jeśli zostanie użyta w ścieżce krytycznej ( caniuse.com/#feat=urlsearchparams ).
Joshua Robinson,
15

Podana odpowiedź jest solidna.

Jeśli chcesz użyć modułu qs zamiast ciągu zapytania (mają one podobną popularność), oto składnia:

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

Opcja ignoreQueryPrefix służy do ignorowania wiodącego znaku zapytania.

fisch2
źródło
1
Miły. w styczniu 2019 r. qs ma 12 milionów pobrań tygodniowo w porównaniu do 2,7 miliona w przypadku ciągu zapytania.
oyalhi
6

Zaakceptowana odpowiedź działa dobrze, ale jeśli nie chcesz instalować dodatkowego pakietu, możesz użyć tego:

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

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

getUrlParameter('key');

wróci value

kartikag01
źródło
Dzięki za tonę. Biblioteka „ciąg zapytania” z jakiegoś powodu nie działała dla mnie, ale twoje rozwiązanie działało jak marzenie. Używałem „reaguj-dom”: „^ 16.0.0”, „reaguj-router”: „^ 4.2.0”, „reaguj-router-dom”: „^ 4.2.2” i „ciąg-zapytania”: „^ 5.0.1”,
Rohan_Paul
zakłada to tylko, że masz jeden parametr w swoim kwerendie. OP wyraźnie pyta, jak uzyskać parametry zapytania - i to właśnie robią wspomniane moduły npm. Zamień to w funkcję, która zwraca obiekt par klucz / wartość z ciągu zapytania i to byłoby naprawdę przydatne!
Andy Lorenz
@AndyLorenz to działa nawet, gdy masz wiele parametrów zapytania, wywołaj daną funkcję z kluczem, którego wartość chcesz uzyskać. Tak, metodę można również przekształcić, aby uzyskać mapę wartości kluczowych.
kartikag01
to by działało, ale nie jest dobrym rozwiązaniem @Kartik_Agarwal. (a) Wymagałoby to wielu wykonań zasadniczo tego samego (potencjalnie kosztownego) kodu, (b) dla każdego parametru należałoby użyć oddzielnych zmiennych, podczas gdy idealnie byłoby wypełnić obiekt parami klucz / wartość, (c) wymaga poznanie nazw parametrów i dodatkowe sprawdzenie, czy istnieją, czy nie. Gdyby to był mój kod, szukałbym wyrażenia regularnego, które może przechwytywać wszystkie parametry iteracyjnie, ale muszę przyznać, że wyrażenia regularne powodują krwawienie uszu!
Andy Lorenz
5

Szukałem parametrów dla routera reagującego v4, a oni nie używali go dla wersji 4, a nie jak router reagujący v2 / 3. Zostawię inną funkcję - może komuś się to przyda. Potrzebujesz tylko es6 lub zwykłego javascript.

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

Tę funkcję można również ulepszyć

Xopsy
źródło
2

Ech?

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);
Faheem
źródło
0

Właśnie to zrobiłem, więc nie musisz zmieniać całej struktury kodu (gdzie używasz zapytania ze sklepu routera Redux), jeśli aktualizujesz, aby reagować na router v4 lub nowszy z niższej wersji.

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

Dimitris Saltaferis
źródło
1
Link do rozwiązania jest mile widziany, ale upewnij się, że Twoja odpowiedź jest przydatna bez niego: dodaj kontekst wokół linku, aby inni użytkownicy mieli pojęcie, co to jest i dlaczego się tam znajduje, a następnie zacytuj najbardziej odpowiednią część strony, którą podałeś. ponowne łącze w przypadku, gdy strona docelowa jest niedostępna. Odpowiedzi, które są niewiele więcej niż linkiem, mogą zostać usunięte .
mrun
-1

Bardzo łatwe

po prostu użyj haka useParams()

Przykład:

Router :

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

W twoim składniku :

export default function UserComponent() {

  const { id } = useParams();

  return (
    <>{id}</>
  );
}
CommonSenseCode
źródło
To nie działa w przypadku użycia opisanym w pytaniu (przynajmniej nie z React-Router v4: awarerouter.com/web/api/Hooks/useparams ) useParams ujawnia tylko parametry ścieżki, a nie parametry wyszukiwania.
Bennit
-4

Bez potrzeby jakiegokolwiek pakietu:

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

Następnie możesz dotrzeć do powiązanych parametrów za pomocą params.id

mesarikaya
źródło
3
this.props.match.paramszawiera parametry ścieżki, to pytanie dotyczy parametrów zapytania.
Hubert