Comment obtenir la valeur du paramètre de chaîne de requête

Réagir Routeur v3

Réagir Routeur traite l'endroit pour vous et le transmet à votre RouteComponent que les accessoires. Vous pouvez accéder à la requête (après ? dans l'url) d'une part via

this.props.location.query.__firebase_request_key

Si vous êtes à la recherche pour le chemin de valeurs de paramètres, séparés par un deux-points (:) à l'intérieur du routeur, ceux-ci sont accessibles via

this.props.match.params.redirectParam

Cela s'applique à la fin de Réagir Routeur v3 versions (pas sûr). Ancien routeur versions ont été signalés à utiliser this.props.params.redirectParam.

Réagir Routeur v4 et Réagir Routeur v5

Réagir Routeur v4 de ne pas analyser la requête pour vous, mais vous ne pouvez y accéder via this.props.location.search. Pour des raisons de voir nbeuchat réponse.

E. g. avec la chaîne de la requête bibliothèque importées comme qs vous pourriez faire

qs.parse(this.props.location.search, { ignoreQueryPrefix: true }).__firebase_request_key

Voir cette réponse pour encore plus d'idées sur l'analyse de la chaîne de recherche.

En outre, si votre composant n'est pas un enfant direct d'un Switch vous devez utiliser withRouter d'accéder à un routeur fourni des accessoires.

Général

nizam.sp suggestion à faire

console.log(this.props)

sera utile dans tous les cas.

Réagir Routeur v3

À Réagir Routeur v3, vous pouvez obtenir la chaîne de la requête de this.props.location.search (?qs1=naisarg&qs2=parmar). Par exemple, avec let params = queryString.parse(this.props.location.search), donnerait { qs1 : 'naisarg', qs2 : 'parmar'}

Réagir Routeur v4

À Réagir Routeur v4, le this.props.location.query n'existe plus. Vous avez besoin d'utiliser this.props.location.search place et d'analyser les paramètres de la requête, soit par vous-même ou à l'aide d'un package existant comme query-string.

Exemple

Voici un exemple minimal à l'aide de Réagir Routeur v4 et la query-string bibliothèque.

import { withRouter } from 'react-router-dom';
import queryString from 'query-string';

class ActivateAccount extends Component{
    someFunction(){
        let params = queryString.parse(this.props.location.search)
        ...
    }
    ...
}
export default withRouter(ActivateAccount);

Rationnelle

La Réagir Routeur équipe rationnelle pour l'enlèvement de la query propriété est:

Il y a un certain nombre de populaire paquets de chaîne de requête d'analyse/stringifying de façon légèrement différente, et chacune de ces différences pourrait être la "bonne" façon pour certains utilisateurs et "incorrect" pour les autres. Si Réagissent Routeur choisi le "bon", il ne serait bon pour certaines personnes. Ensuite, il serait nécessaire d'ajouter une manière pour les autres utilisateurs de remplacer dans leur choix de requête de l'analyse du package. Il n'y a pas d'usage interne de la chaîne de recherche par Réagir Routeur qui nécessite d'analyser les paires clé-valeur, de sorte qu'il n'a pas besoin de choisir l'un de ces devrait être "de droite".

[...]

L'approche adoptée pour la version 4.0 est de supprimer tous les "piles" type de caractéristiques et de revenir à la base de routage. Si vous avez besoin de chaîne de requête de l'analyse ou de chargement asynchrone ou Redux de l'intégration ou de quelque chose de très spécifique, alors vous pouvez ajouter ce dans une bibliothèque spécifique pour votre cas d'utilisation. Moins de trucs à emballer et que vous n'avez pas besoin, et vous pouvez personnaliser les choses à vos préférences et besoins.

Vous pouvez trouver toute la discussion sur GitHub.

Autant que je sache, il existe trois méthodes que vous pouvez faire.

1.utiliser une expression régulière pour obtenir la chaîne de requête.

2.vous pouvez utiliser le navigateur de l'api.
l'image de l'url actuelle est comme ceci:

http://www.google.com.au?token=123

nous voulons juste obtenir 123;

Première

 const query = new URLSearchParams(this.props.location.search);

Puis

const token = query.get('token')
console.log(token)//123

3. l'utilisation d'une troisième bibliothèque appelée "la chaîne de la requête'.
Tout d'abord l'installer

npm i query-string

Puis de l'importer de l'actuel fichier javascript:

 import queryString from 'query-string'

Étape suivante consiste à obtenir 'token' dans l'url en cours, procédez de la manière suivante:

const value=queryString.parse(this.props.location.search);
const token=value.token;
console.log('token',token)//123

Espère que cela aide.

Mis à jour sur 25/02/2019

1. si l'url se présente comme suit:

http://www.google.com.au?app=home&act=article&aid=160990

nous définissons une fonction permettant d'obtenir les paramètres:

function getQueryVariable(variable)
{
        var query = window.location.search.substring(1);
        console.log(query)//"app=article&act=news_content&aid=160990"
        var vars = query.split("&");
        console.log(vars) //[ 'app=article', 'act=news_content', 'aid=160990' ]
        for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    console.log(pair)//[ 'app', 'article' ][ 'act', 'news_content' ][ 'aid', '160990' ] 
        if(pair[0] == variable){return pair[1];}
         }
         return(false);
}

Nous pouvons obtenir de l'aide "" par :

getQueryVariable('aid') //160990

Réagir Routeur v4

const urlParams = new URLSearchParams(this.props.location.search)
const key = urlParams.get('__firebase_request_key')

Veuillez noter qu'il est actuellement expérimentale.

Vérifier la compatibilité de navigateur ici: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/URLSearchParams#Browser_compatibility

this.props.params.your_param_name fonctionne.

C'est la façon d'obtenir les paramètres de votre chaîne de requête.

S'il vous plaît ne console.log(this.props); à explorer toutes les possibilités.

Si vous n'obtenez pas le this.props... vous vous attendiez sur la base des autres réponses, vous devrez peut-être utiliser withRouter (docs v4):

import React from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router'

//A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

  render() {
    const { match, location, history } = this.props

    return (
      <div>You are now at {location.pathname}</div>
    )
  }
}

//Create a new component that is "connected" (to borrow redux terminology) to the router.  
const TwitterSsoButton = withRouter(ShowTheLocation)  

//This gets around shouldComponentUpdate
withRouter(connect(...)(MyComponent))

//This does not
connect(...)(withRouter(MyComponent))

componentDidMount(){
    //http://localhost:3000/service/anas
    //<Route path="/service/:serviceName" component={Service} />
    const {params} =this.props.match;
    this.setState({ 
        title: params.serviceName ,
        content: data.Content
    })
}

Peut-être un peu en retard mais c'réagir crochet peut vous aider à obtenir/définir des valeurs dans l'URL de la requête: https://github.com/rudyhuynh/use-url-search-params (écrit par moi).

Il fonctionne avec ou sans react-router.
Ci-dessous l'exemple de code dans votre cas:

import React from "react";
import { useUrlSearchParams } from "use-url-search-params";

const MyComponent = () => {
  const [params, setParams] = useUrlSearchParams()
  return (
    <div>
      __firebase_request_key: {params.__firebase_request_key}
    </div>
  )
}

J'ai utilisé un package externe appelé la chaîne de la requête pour analyser les paramètres d'url comme si.

import React, {Component} from 'react'
import { parse } from 'query-string';

resetPass() {
    const {password} = this.state;
    this.setState({fetching: true, error: undefined});
    const query = parse(location.search);
    return fetch(settings.urls.update_password, {
        method: 'POST',
        headers: {'Content-Type': 'application/json', 'Authorization': query.token},
        mode: 'cors',
        body: JSON.stringify({password})
    })
        .then(response=>response.json())
        .then(json=>{
            if (json.error)
                throw Error(json.error.message || 'Unknown fetch error');
            this.setState({fetching: false, error: undefined, changePassword: true});
        })
        .catch(error=>this.setState({fetching: false, error: error.message}));
}

Vous pouvez voir la requête en utilisant:

console.log(this.props.location.query)

---

solution plus simple!

de routage :

   <Route path="/app/someUrl/:id" exact component={binder} />

à réagir code :

componentDidMount() {
    var id = window.location.href.split('/')[window.location.href.split('/').length - 1];
    var queryString = "http://url/api/controller/" + id
    $.getJSON(queryString)
      .then(res => {
        this.setState({ data: res });
      });
  }