web-dev-qa-db-fra.com

Comment obtenir une valeur de paramètre depuis une chaîne de requête

Comment définir un itinéraire dans mon fichier routes.jsx pour capturer la valeur du paramètre __firebase_request_key à partir d'une URL générée par le processus de connexion unique de Twitter après la redirection à partir de leurs serveurs?

http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla

J'ai essayé avec la configuration d'itinéraires suivante, mais le :redirectParam n'intercepte pas le paramètre mentionné:

<Router>
  <Route path="/" component={Main}>
    <Route path="signin" component={SignIn}>
      <Route path=":redirectParam" component={TwitterSsoButton} />
    </Route>
  </Route>
</Router>
reactjsreact-router
226
Franco

React Router v3

React Router analyse déjà l’emplacement pour vous et le transmet à votre RouteComponent comme accessoire. Vous pouvez accéder à la partie requête (après? Dans l'URL) via

this.props.location.query.__firebase_request_key

Si vous recherchez les valeurs du paramètre path, séparées par deux points (:) dans le routeur, elles sont accessibles via

this.props.match.params.redirectParam

Ceci s’applique aux versions tardives de React Router v3 (vous ne savez pas quoi). Les anciennes versions de routeur utilisaient this.props.params.redirectParam.

React Router v4

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 query-string library importé en tant que qs vous pourriez le faire

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

De plus, si votre composant n'est pas un enfant direct d'une Switch, vous devez utiliser withRouter pour accéder à l'un des accessoires fournis par le routeur.

Général

suggestion de nizam.sp

console.log(this.props)

sera utile dans tous les cas.

303
Christian

React Router v4

Utilisation de component

<Route path="/users/:id" component={UserPage}/> 


this.props.match.params.id

Le composant est automatiquement rendu avec les accessoires de route.


Utilisation de render

<Route path="/users/:id" render={(props) => <UserPage {...props} />}/> 


this.props.match.params.id

Les accessoires de route sont transmis à la fonction de rendu.

110
spencer.sm

React Router v4

Avec React Router v4, le this.props.location.query n'existe plus. Vous devez utiliser this.props.location.search à la place et analyser les paramètres de la requête par vous-même ou à l'aide d'un package existant tel que query-string .

Exemple

Voici un exemple minimal d'utilisation de React Router v4 et de la bibliothèque query-string.

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);

Rationnel

L’équipe du React Router pour supprimer la propriété query est la suivante:

Il existe un certain nombre de packages populaires qui effectuent une analyse légèrement différente de la syntaxe de la chaîne. Chacune de ces différences peut correspondre à la méthode "correcte" pour certains utilisateurs et "incorrecte" pour d'autres. Si React Router choisissait le "bon", il ne conviendrait que pour certaines personnes. Ensuite, il faudrait ajouter un moyen permettant aux autres utilisateurs de se substituer à leur package d'analyse syntaxique préféré. React Router n'utilise en interne aucune chaîne de recherche qui l'oblige à analyser les paires clé-valeur. Il n'est donc pas nécessaire de choisir laquelle d'entre elles doit être "correcte".

[...]

L’approche adoptée pour la version 4.0 consiste à supprimer toutes les fonctionnalités du type "piles incluses" et à revenir à un routage de base. Si vous avez besoin d'analyser les chaînes de requête, de charger de manière asynchrone ou d'intégrer Redux ou quelque chose de très spécifique, vous pouvez l'ajouter à une bibliothèque spécialement pour votre cas d'utilisation. Moins de choses cruelles sont emballées dans ce dont vous n’avez pas besoin et vous pouvez personnaliser les choses selon vos préférences et vos besoins.

Vous pouvez trouver la discussion complète sur GitHub .

60
nbeuchat

React Router v4 n'a plus leprops.location.queryobject (voir github discussion). La réponse acceptée ne fonctionnera donc pas pour les nouveaux projets.

Une solution pour la v4 consiste à utiliser une bibliothèque externe query-string pour analyser le props.location.search

const qs = require('query-string');
//or
import * as qs from 'query-string';

console.log(location.search);
//=> '?foo=bar'

const parsed = qs.parse(location.search);
console.log(parsed);
//=> {foo: 'bar'}
56
JTG

vous pouvez vérifier le react-router , en toute simplicité, vous pouvez utiliser le code pour obtenir le paramètre de requête tant que vous avez défini dans votre routeur:

this.props.params.userId
23
TommyLike

React Router v4

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

S'il vous plaît noter qu'il est actuellement expérimental. 

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

15
Mike Frenil L

Si votre routeur est comme ça

<Route exact path="/category/:id" component={ProductList}/>

Vous obtiendrez cet identifiant comme ça

this.props.match.params.id
14
Milan Panigrahi

Autant que je sache, trois méthodes sont possibles.

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

2.vous pouvez utiliser le navigateur api . Image l'url actuelle est la suivante:

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

nous voulons juste avoir 123;

Premier 

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

Ensuite

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

3. utilisez une troisième bibliothèque appelée 'query-string' . Installez-la d'abord.

npm i query-string

Puis importez-le dans le fichier javascript actuel:

 import queryString from 'query-string'

La prochaine étape consiste à obtenir un "jeton" dans l'URL actuelle, procédez comme suit:

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

J'espère que ça aide.

Mis à jour le 25/02/2019

  1. si l'URL actuelle ressemble à ceci:

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

nous définissons une fonction pour 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 en:

getQueryVariable('aid') //160990
10
MING WU

React router à partir de la v4 ne vous donne plus le query params directement dans son objet location. La raison étant

Il existe un certain nombre de paquets populaires qui interrogent string analyser/stringing légèrement différemment, et chacun de ceux-ci les différences peuvent être "correctes" pour certains utilisateurs et "incorrectes" pour les autres. Si React Router choisissait le "bon", il ne s'agirait que de bon pour certaines personnes. Ensuite, il faudrait ajouter un moyen pour l'autre les utilisateurs à substituer dans leur paquet d'analyse syntaxique préféré. Il y a aucune utilisation interne de la chaîne de recherche par React Router qui le nécessite pour analyser les paires clé-valeur, de sorte qu'il n'a pas besoin de choisir lequel l'un d'entre eux devrait être "correct".

Cela inclus, il serait plus logique d’analyser simplement location.search dans votre vue les composants qui attendent un objet de requête.

Vous pouvez le faire de manière générique en remplaçant la withRouter à partir de react-router comme

customWithRouter.js

import { compose, withPropsOnChange } from 'recompose';
import { withRouter } from 'react-router';
import queryString from 'query-string';

const propsWithQuery = withPropsOnChange(
    ['location', 'match'],
    ({ location, match }) => {
        return {
            location: {
                ...location,
                query: queryString.parse(location.search)
            },
            match
        };
    }
);

export default compose(withRouter, propsWithQuery)
6
Shubham Khatri

J'ai eu du mal à résoudre ce problème. Si rien de ce qui précède ne fonctionne, vous pouvez essayer ceci à la place. J'utilise l'application create-react-app 

Exigences

react-router-dom ":" ^ 4.3.1 "

Solution

À l'emplacement où le routeur est spécifié

<Route path="some/path" ..../>

Ajoutez le nom du paramètre que vous voudriez transmettre comme ceci

<Route path="some/path/:id" .../>

Sur la page où vous effectuez le rendu de/path, vous pouvez spécifier ceci pour afficher le nom du paramètre id d'appel comme ceci

componentDidMount(){
  console.log(this.props);
  console.log(this.props.match.params.id);
}

À la fin de l'exportation par défaut 

export default withRouter(Component);

N'oubliez pas d'inclure l'importation

import { withRouter } from 'react-router-dom'

Lorsque console.log (this.props) vous pourrez savoir ce qui a été transmis. S'amuser!

5
NarDd

Si vous n'obtenez pas le this.props... que vous attendiez d'après les 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))
5
jtlindsey

this.props.params.your_param_name fonctionnera.

C'est le moyen d'obtenir les paramètres de votre chaîne de requête.
S'il vous plaît faites console.log(this.props); pour explorer toutes les possibilités.

5
nizam.sp

Peut-être un peu tard, mais ce crochet de réaction peut vous aider à obtenir/définir des valeurs dans une requête URL: https://github.com/rudyhuynh/use-url-search-params (écrit par moi).

Cela fonctionne avec ou sans react-router. Vous trouverez ci-dessous un 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>
  )
}
2
Ruby Ybur

Dans le composant où vous devez accéder aux paramètres, vous pouvez utiliser

this.props.location.state.from.search

qui révélera la chaîne de requête complète (tout ce qui suit le signe ?)

2
Rocco Ghielmini
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
    })
}
1
Anas Alpure

In React Router v4 uniquement avec Route est la bonne manière

Vous pouvez accéder aux propriétés de l’historique et à la correspondance la plus proche via le composant d’ordre supérieur withRouter. withRouter transmettra les accessoires de correspondance, d'emplacement et d'historique mis à jour au composant encapsulé à chaque restitution.

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 ShowTheLocationWithRouter = withRouter(ShowTheLocation)

https://reacttraining.com/react-router/web/api/withRouter

1
krystianj

J'ai utilisé un paquet externe appelé query-string pour analyser les paramètres d'URL comme suit.

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}));
}
0
Joe
let data = new FormData();
data.append('file', values.file);
0
fatemeh kazemi zadeh virus3000

Vous pouvez voir la requête en utilisant:

console.log(this.props.location.query)
0
smartworld-dm