Porównaj ceny domen i usług IT, sprzedawców z całego świata

Linia responsywnego routera


Próbuję ustawić ścieżkę trasy przy użyciu ciągu zapytania. Coś w stylu:
www.mywebsite.com/results?query1=:query1&query2=:query2&query3=:query3

Następnie przejdę do komponentu „Wyniki” w następujący sposób:
<Route path="/" component={Main}>
<IndexRoute component={Home}/>
<Route path="results?query1=:query1&query2=:query2&query3=:query3"
component={SearchResults}/>
</Route>

W kontenerze SearchResults chciałbym mieć dostęp do parametrów do query1, query2 i query3.
Nie udało mi się zmusić go do pracy. Otrzymuję następujący błąd:

bundle.js: 22627 ostrzeżenie: lokalizacja [respond-router]
„/ results? query1 = 1 & amp; query2 = 2 & amp; query3 = 3” nie pasuje do żadnej ze stron

Próbowałem wykonać kroki opisane w następującym samouczku: (sekcja: a co z parametrami ciągu zapytania?)

https://www.themarketingtechno ... ction
https://www.themarketingtechno ... tion/
/
Czy mogę tutaj uzyskać pomoc?
Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Jeśli używasz React Router v2.xx, możesz uzyskać dostęp do parametrów zapytania poprzez obiekt
location.query
przekazany do komponentu trasy.
Innymi słowy, możesz zmienić kolejność trasy, aby wyglądała następująco:
<Route path="results" component={SearchResults}/>

Następnie wewnątrz komponentu
SearchResults
użyj
this.props.location.query.query1
(podobnie do
query2
i
query3
), aby uzyskać dostęp do wartości parametrów zapytania.

EDIT:

nadal dotyczy to React Router v3.xx.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Jeśli używasz React Router & > = v4
location.query
nie jest już dostępny. Możesz podłączyć zewnętrzną bibliotekę (np

, https:// www.npmjs.com/package/query-string
https://www.npmjs.com/package/query-string) lub użyj czegoś takiego:
const search = props.location.search;// could be '?foo=bar'
const params = new URLSearchParams(search);
const foo = params.get('foo');// bar

(pamiętaj tylko o tym
URLSearchParams()
https://developer.mozilla.org/ ... arams
nie obsługiwane przez Internet Explorer)

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się