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?

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

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.

Innym przydatnym podejściem może być użycie tego po wyjęciu z pudełka URLSearchParams;

  let { search } = useLocation();

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

Czysty, czytelny i nie wymaga modułu. Więcej informacji poniżej;

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

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

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ć

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

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

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

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