Comment obtenir la valeur d'un paramètre à partir d'une chaîne de requête

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>
Uwe Keim
Question modifiée 27 mai 2018 в 6:37
Programmation
reactjs react-router
12 février 2016 в 12:19
21 vues
Solution

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

[3] : https://github.com/sindresorhus/query-string

Christian
Réponse modifiée 14 mai 2019 в 1:03
Commentaires (11)

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

[1] : https://github.com/reactjs/react-router

Commentaires (1)

this.props.params.your_param_name fonctionnera.

C'est la façon d'obtenir les paramètres à partir de votre chaîne de requête.
Veuillez faire console.log(this.props); pour explorer toutes les possibilités.

Commentaires (0)