Jak uzyskać wartość parametru z łańcucha zapytania
Jak mogę zdefiniować trasę w moim pliku routes.jsx, aby przechwycić wartość parametru __firebase_request_key z adresu URL wygenerowanego przez Twitter's single sign on process po przekierowaniu z ich serwerów?
http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablablaPróbowałem z następującą konfiguracją tras, ale :redirectParam nie przechwytuje wspomnianego parametru:
<Router>
<Route path="/" component={Main}>
<Route path="signin" component={SignIn}>
<Route path=":redirectParam" component={TwitterSsoButton} />
</Route>
</Route>
</Router>
React Router v3
React Router już parsuje lokalizację dla Ciebie i przekazuje ją do Twojego RouteComponent jako rekwizyt. Możesz uzyskać dostęp do części zapytania (po ? w url) poprzez
this.props.location.query.__firebase_request_keyJeśli szukasz wartości parametrów ścieżki, oddzielonych dwukropkiem (:) wewnątrz routera, są one dostępne poprzez
this.props.match.params.redirectParamDotyczy to późnych wersji React Router v3 (nie jestem pewien, które). Starsze wersje routera zostały zgłoszone do użycia this.props.params.redirectParam.
React Router v4 i React Router v5.
React Router v4 nie parsuje już dla Ciebie zapytania, ale możesz uzyskać do niego dostęp tylko poprzez this.props.location.search. Dla powodów zobacz nbeuchat's answer.
Np. z biblioteką query-string zaimportowaną jako qs mógłbyś zrobić
qs.parse(this.props.location.search, { ignoreQueryPrefix: true }).__firebase_request_keyZobacz ta odpowiedź dla niektórych więcej pomysłów na parsowanie ciągu wyszukiwania.
Dodatkowo, jeśli twój komponent nie jest bezpośrednim dzieckiem Przełącznika musisz użyć withRouter aby uzyskać dostęp do jakichkolwiek rekwizytów dostarczanych przez router.
Ogólne
sugestia nizam.sp' do zrobienia
console.log(this.props)będzie pomocna w każdym przypadku.
możesz sprawdzić react-router, w prosty sposób, możesz użyć kodu, aby uzyskać parametr zapytania tak długo, jak zdefiniowałeś w swoim routerze:
this.props.params.userId
