web-dev-qa-db-fra.com

Obtention des paramètres de requête à partir du fragment de hachage react-router

J'utilise react et react-router pour mon application côté client. Je n'arrive pas à comprendre comment obtenir les paramètres de requête suivants à partir d'une URL comme:

http://xmen.database/search#/?status=APPROVED&page=1&limit=20

Mes itinéraires ressemblent à ceci (le chemin est totalement faux, je le sais):

var routes = (
<Route>
    <DefaultRoute handler={SearchDisplay}/>
    <Route name="search" path="?status=:status&page=:page&limit=:limit" handler={SearchDisplay}/>
    <Route name="xmen" path="candidate/:accountId" handler={XmenDisplay}/>
</Route>
);

Mon itinéraire fonctionne bien, mais je ne sais pas comment formater le chemin pour obtenir les paramètres souhaités. Appréciez toute aide à ce sujet!

javascriptreactjsclient-sidereact-routerclient-side-scripting
101
Christopher Robin

Remarque: Copier/Coller à partir d'un commentaire. Assurez-vous d'aimer le message original!

Ecrire dans es6 et utiliser react 0.14.6/react-router 2.0.0-rc5. J'utilise cette commande pour rechercher les paramètres de requête dans mes composants:

this.props.location.query

Il crée un hachage de tous les paramètres de requête disponibles dans l'URL.

Mise à jour:

Pour React-Router v4, voir cette réponse . Fondamentalement, utilisez this.props.location.search pour obtenir la chaîne de requête et analyser avec le package query-string ou RLSearchParams :

const params = new URLSearchParams(paramsString); 
const tags = params.get('tags');
124
Duncan Finney

OLD (avant la v4):

Ecrire dans es6 et utiliser react 0.14.6/react-router 2.0.0-rc5. J'utilise cette commande pour rechercher les paramètres de requête dans mes composants:

this.props.location.query

Il crée un hachage de tous les paramètres de requête disponibles dans l'URL.

UPDATE (React Router v4 +):

this.props.location.query in React Le routeur 4 a été supprimé (utilise actuellement la version 4.1.1). Pour plus d'informations sur le problème, cliquez ici: https://github.com/ReactTraining/react-router/issues/441

On dirait qu'ils veulent que vous utilisiez votre propre méthode pour analyser les paramètres de requête, utilisant actuellement cette bibliothèque pour combler le vide: https://github.com/sindresorhus/query-string

57
Marrs

Les réponses ci-dessus ne fonctionneront pas dans react-router v4. Voici ce que j'ai fait pour résoudre le problème -

Premier Installez query-string qui sera nécessaire pour l'analyse.

npm install -save query-string

Maintenant dans le composant routé, vous pouvez accéder à la chaîne de requête non analysée comme ceci

this.props.location.search

Vous pouvez le vérifier en vous connectant à la console.

Enfin analyser pour accéder aux paramètres de la requête

const queryString = require('query-string');
var parsed = queryString.parse(this.props.location.search);
console.log(parsed.param); // replace param with your own

Donc, si la requête ressemble à ?hello=world

console.log(parsed.hello) enregistrera world

44
hashcode55

update 2017.12.25

"react-router-dom": "^4.2.2"

uRL comme

BrowserHistory: http://localhost:3000/demo-7/detail/2?sort=name

HashHistory: http://localhost:3000/demo-7/#/detail/2?sort=name

with query-string dépendance:

this.id = props.match.params.id;
this.searchObj = queryString.parse(props.location.search);
this.from = props.location.state.from;

console.log(this.id, this.searchObj, this.from);

résultats:

2 {sort: "name"} home

"react-router": "^2.4.1"

URL comme http://localhost:8080/react-router01/1?name=novaline&age=26

const queryParams = this.props.location.query;

queryParams est un objet contenant les paramètres de la requête: {name: novaline, age: 26}

15
slideshowp2

Avec le paquet stringquery:

import qs from "stringquery";

const obj = qs("?status=APPROVED&page=1limit=20");  
// > { limit: "10", page:"1", status:"APPROVED" }

Avec la requête string

import qs from "query-string";
const obj = qs.parse(this.props.location.search);
console.log(obj.param); // { limit: "10", page:"1", status:"APPROVED" }

Aucun forfait:

const convertToObject = (url) => {
  const arr = url.slice(1).split(/&|=/); // remove the "?", "&" and "="
  let params = {};

  for(let i = 0; i < arr.length; i += 2){
    const key = arr[i], value = arr[i + 1];
    params[key] = value ; // build the object = { limit: "10", page:"1", status:"APPROVED" }
  }
  return params;
};


const uri = this.props.location.search; // "?status=APPROVED&page=1&limit=20"

const obj = convertToObject(uri);

console.log(obj); // { limit: "10", page:"1", status:"APPROVED" }


// obj.status
// obj.page
// obj.limit

J'espère que ça t'as aidé :)

Bon codage!

7
EsterlingAccime Youtuber

Après avoir lu les autres réponses (d'abord par @ duncan-finney puis par @Marrs), je me suis mis à la recherche du journal des modifications qui explique la façon idiomatique réact-router 2.x de résoudre ce problème. Le documentation sur l'utilisation de l'emplacement (dont vous avez besoin pour les requêtes) dans les composants est en réalité contredit par le code réel. Donc, si vous suivez leurs conseils, vous obtenez de grands avertissements en colère comme celui-ci:

Warning: [react-router] `context.location` is deprecated, please use a route component's `props.location` instead.

Il s'avère que vous ne pouvez pas avoir une propriété de contexte appelée location qui utilise le type d'emplacement. Mais vous pouvez utiliser une propriété de contexte appelée loc qui utilise le type d'emplacement. La solution est donc une petite modification sur leur source comme suit:

const RouteComponent = React.createClass({
    childContextTypes: {
        loc: PropTypes.location
    },

    getChildContext() {
        return { location: this.props.location }
    }
});

const ChildComponent = React.createClass({
    contextTypes: {
        loc: PropTypes.location
    },
    render() {
        console.log(this.context.loc);
        return(<div>this.context.loc.query</div>);
    }
});

Vous pouvez également ne transmettre que les parties de l'objet de localisation que vous voulez chez vos enfants bénéficient du même avantage. Cela n'a pas changé l'avertissement de changer le type d'objet. J'espère que ça t'as aidé.

4
Adam McCormick
"react-router-dom": "^5.0.0",

vous n'avez pas besoin d'ajouter de module supplémentaire uniquement dans votre composant qui possède une adresse URL comme celle-ci:

http: // localhost: 3000/# /? autorité '

vous pouvez essayer le code simple suivant:

    const search =this.props.location.search;
    const params = new URLSearchParams(search);
    const authority = params.get('authority'); //
2
meisam nazari

Simple solution js:

queryStringParse = function(string) {
    let parsed = {}
    if(string != '') {
        string = string.substring(string.indexOf('?')+1)
        let p1 = string.split('&')
        p1.map(function(value) {
            let params = value.split('=')
            parsed[params[0]] = params[1]
        });
    }
    return parsed
}

Et vous pouvez l'appeler de n'importe où en utilisant:

var params = this.queryStringParse(this.props.location.search);

J'espère que cela t'aides.

1
Vijesh Chandera

Vous pouvez obtenir l'erreur suivante lors de la création d'une version de production optimisée lors de l'utilisation du module query-string .

Échec de la minification du code à partir de ce fichier: ./node_modules/query-string/index.js:8

Pour surmonter cela, veuillez utiliser le module alternatif appelé stringquery qui effectue le même processus sans aucun problème lors de l'exécution de la construction.

import querySearch from "stringquery";

var query = querySearch(this.props.location.search);
0
Balasubramani M