[javascript] Obtention des paramètres de requête à partir du fragment de hachage du routeur de réaction



Answers

Ancien (avant v4):

Ecrire en es6 et utiliser reagir 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 dans React Router 4 a été supprimé (en utilisant actuellement v4.1.1) plus sur le problème ici: https://github.com/ReactTraining/react-router/issues/4410

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

Question

J'utilise rea et reac-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 routes ressemblent à ceci (le chemin est totalement faux je 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 suis pas sûr de savoir comment formater le chemin pour obtenir les paramètres que je veux. Appréciez toute aide à ce sujet!




Avec stringquery

import qs from "stringquery";

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

Avec la chaîne de requête Package:

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

Aucun paquet:

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 cela pourra aider :)

Codage heureux!




mise à jour 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

avec dépendance de https://github.com/sindresorhus/query-string :

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 qui contient les paramètres de requête: {name: novaline, age: 26}




Links