Comment puis-je définir une route dans mon fichier routes.jsx pour capturer la valeur du paramètre __firebase_request_key
d'une URL générée par le processus d'authentification unique de Twitter après la redirection depuis leurs serveurs ?
http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla
J'ai essayé avec la configuration suivante des routes, mais le paramètre :redirectParam
n'attrape pas le paramètre mentionné :
<Router>
<Route path="/" component={Main}>
<Route path="signin" component={SignIn}>
<Route path=":redirectParam" component={TwitterSsoButton} />
</Route>
</Route>
</Router>
React Router v3
React Router analyse déjà l'emplacement pour vous et le transmet à votre [RouteComponent][1] en tant que props. Vous pouvez accéder à la partie requête (après ? dans l'url) via
this.props.location.query.__firebase_request_key
Si vous cherchez les valeurs des paramètres du chemin, séparées par deux points ( :) à l'intérieur du routeur, elles sont accessibles via
this.props.match.params.redirectParam
Ceci s'applique aux dernières versions de React Router v3 (je ne sais pas laquelle). Les versions plus anciennes du routeur utilisaient this.props.params.redirectParam
.
React Router v4 et React Router v5
React Router v4 n'analyse plus la requête pour vous, mais vous ne pouvez y accéder que via this.props.location.search
. Pour les raisons, voir la réponse de nbeuchat.
Par exemple, avec la bibliothèque [query-string][3] importée sous le nom de qs
, vous pourriez faire ceci
qs.parse(this.props.location.search, { ignoreQueryPrefix: true }).__firebase_request_key
Voir cette réponse pour d'autres idées sur l'analyse de la chaîne de recherche.
De plus, si votre composant n'est pas un enfant direct d'un Switch
, vous devez utiliser withRouter pour accéder à l'un des props fournis par le routeur.
Général
suggestion de nizam.sp's à faire
console.log(this.props)
sera utile dans tous les cas.
[1] : https://reacttraining.com/react-router/core/api/Route/Route-props
Vous pouvez consulter le [react-router][1], pour simplifier, vous pouvez utiliser le code pour obtenir les paramètres de la requête tant que vous les avez définis dans votre routeur :
this.props.params.userId