Wie kann ich eine Route in meiner routes.jsx-Datei definieren, um den __firebase_request_key
Parameterwert von einer URL zu erfassen, die von Twitter's single sign on Prozess nach der Umleitung von ihren Servern generiert wird?
http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla
Ich habe es mit der folgenden Routenkonfiguration versucht, aber der :redirectParam
fängt den genannten Parameter nicht ab:
<Router>
<Route path="/" component={Main}>
<Route path="signin" component={SignIn}>
<Route path=":redirectParam" component={TwitterSsoButton} />
</Route>
</Route>
</Router>
React Router v3
Der React Router parst den Standort bereits für Sie und übergibt ihn als Props an Ihre RouteComponent. Sie können auf den Query-Teil (nach dem ? in der Url) über
this.props.location.query.__firebase_request_key
Wenn Sie nach den Werten der Pfadparameter suchen, die durch einen Doppelpunkt (:) innerhalb des Routers getrennt sind, können Sie diese über
this.props.match.params.redirectParam
Dies gilt für späte React Router v3 Versionen (bin mir nicht sicher welche). Ältere Router-Versionen wurden berichtet, dass sie this.props.params.redirectParam
verwenden.
React Router v4 und React Router v5
React Router v4 parst die Abfrage nicht mehr für Sie, sondern Sie können nur noch über this.props.location.search
auf sie zugreifen. Für Gründe siehe nbeuchat's Antwort.
Mit der query-string Bibliothek, die als qs
importiert wurde, könnte man z.B. folgendes tun
qs.parse(this.props.location.search, { ignoreQueryPrefix: true }).__firebase_request_key
Siehe [diese Antwort] (https://stackoverflow.com/a/53079875/969483) für weitere Ideen zum Parsen des Suchstrings.
Wenn Ihre Komponente kein direktes Kind eines Switch
ist, müssen Sie außerdem withRouter verwenden, um auf die vom Router bereitgestellten Requisiten zuzugreifen.
Allgemein
nizam.sp's Vorschlag zu tun
console.log(this.props)
wird auf jeden Fall hilfreich sein.
Sie können die react-router, in einfachen, können Sie den Code verwenden, um Abfrageparameter zu erhalten, solange Sie in Ihrem Router definiert:
this.props.params.userId