javascript - link - react router query params

Obtención de parámetros de consulta del fragmento hash react-router

Question

Estoy usando react y react-router para mi aplicación en el lado del cliente. Parece que no puedo entender cómo obtener los siguientes parámetros de consulta de una URL como:

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

Mis rutas se ven así (la ruta es totalmente incorrecta, lo sé):

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

Mi ruta funciona bien, pero no estoy seguro de cómo formatear la ruta para obtener los parámetros que quiero. Agradezco cualquier ayuda en esto!

Answer 1

Con el paquete stringquery:

import qs from "stringquery";

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

Con el paquete de cadena de consulta:

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

Sin paquete:

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

Espero que ayude :)

¡Feliz codificación!

Answer 2

ANTIGUO (pre v4):

Escribir en es6 y usar react 0.14.6 / react-router 2.0.0-rc5. Uso este comando para buscar los parámetros de consulta en mis componentes:

this.props.location.query

Crea un hash de todos los parámetros de consulta disponibles en la url.

ACTUALIZACIÓN (React Router v4 +):

this.props.location.query en React Router 4 se ha eliminado (actualmente usando v4.1.1) más sobre el problema aquí: https://github.com/ReactTraining/react-router/issues/4410

Parece que quieren que use su propio método para analizar los parámetros de consulta, actualmente usando esta biblioteca para llenar el vacío: https://github.com/sindresorhus/query-string

Answer 3

Después de leer las otras respuestas (Primero por @ duncan-finney y luego por @Marrs), me propuse encontrar el registro de cambios que explicara la forma idiomática de reaccionar-enrutador 2.x de resolver esto. El código real contradice la documentación sobre el uso de la ubicación (que necesita para consultas) en los componentes. Entonces, si sigues sus consejos, obtienes grandes advertencias enojadas como esta:

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

Resulta que no puede tener una propiedad de contexto llamada ubicación que use el tipo de ubicación. Pero puede usar una propiedad de contexto llamada loc que usa el tipo de ubicación. Entonces, la solución es una pequeña modificación en su fuente de la siguiente manera:

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

También puede transmitir solo las partes del objeto de ubicación que desea en sus hijos para obtener el mismo beneficio. No cambió la advertencia para cambiar al tipo de objeto. Espero que ayude.

Answer 4

Las respuestas anteriores no funcionarán en react-router v4 . Esto es lo que hice para resolver el problema:

Primero instale query-string que será necesaria para el análisis.

npm install -save query-string

Ahora en el componente enrutado puede acceder a la cadena de consulta no analizada como esta

this.props.location.search

Puede verificarlo iniciando sesión en la consola.

Finalmente analizar para acceder a los parámetros de consulta

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

Entonces, si la consulta es como ?hello=world

console.log(parsed.hello) registrará el world

Answer 5

Nota: Copiar / Pegar del comentario. ¡Asegúrate de que te guste la publicación original!

Escribir en es6 y usar react 0.14.6 / react-router 2.0.0-rc5. Uso este comando para buscar los parámetros de consulta en mis componentes:

this.props.location.query

Crea un hash de todos los parámetros de consulta disponibles en la url.

Actualizar:

Para React-Router v4, vea esta respuesta . Básicamente, use this.props.location.search para obtener la cadena de consulta y analizar con el paquete de query-string o URLSearchParams :

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

Answer 6

Puede obtener el siguiente error al crear una compilación de producción optimizada al usar el módulo de query-string .

Error al minificar el código de este archivo: ./node_modules/query-string/index.js:8

Para superar esto, utilice el módulo alternativo llamado stringquery que realiza el mismo proceso sin problemas mientras ejecuta la compilación.

import querySearch from "stringquery"; var query = querySearch(this.props.location.search);

Answer 7

Solución js simple:

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
}

Y puede llamarlo desde cualquier lugar usando:

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

Espero que esto ayude.

Answer 8

actualizar 2017.12.25

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

url como

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

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

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

resultados:

2 {sort: "name"} home

"react-router": "^2.4.1"

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

const queryParams = this.props.location.query;

queryParams es un objeto que contiene los parámetros de consulta: {name: novaline, age: 26}

Answer 9

import querySearch from "stringquery";

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

no necesita agregar ningún módulo adicional solo en su componente que tenga una dirección URL como esta:

http: // localhost: 3000 / # /? autoridad ''

puedes probar el siguiente código simple:

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