react router - change - Cómo obtener parámetros de consulta en react-router v4

react change title

Question

Estoy usando react-router-dom 4.0.0-beta.6 en mi proyecto. Tengo un código como el siguiente:

<Route exact path="/home" component={HomePage}/>

Y quiero obtener parámetros de consulta en el componente HomePage . Encontré location.search param, que se ve así ?key=value , por lo que no se analiza.

¿Cuál es la forma correcta de obtener parámetros de consulta con react-router v4?

Answer 1

Acabo de hacer esto, así que no necesito cambiar la estructura del código completo (donde usas la consulta del almacén de enrutadores redux) si actualizas para reaccionar el enrutador v4 o superior desde una versión inferior.

https://github.com/saltas888/react-router-query-middleware

Answer 2

Eh?

queryfie(string){
    return string
        .slice(1)
        .split(''&'')
        .map(q => q.split(''=''))
        .reduce((a, c) => { a[c[0]] = c[1]; return a; }, {});
}

queryfie(this.props.location.search);

Answer 3

Estaba investigando sobre los parámetros para el router de reacción v4, y no lo usaron para v4, no como el router de reacción v2 / 3. Dejaré otra función, tal vez alguien lo encuentre útil. Solo necesita es6 o javascript simple.

function parseQueryParams(query) {
  //You get a ''?key=asdfghjkl1234567890&val=123&val2&val3=other''
  const queryArray = query.split(''?'')[1].split(''&'');
  let queryParams = {};
  for (let i = 0; i < queryArray.length; i++) {
    const [key, val] = queryArray[i].split(''='');
    queryParams[key] = val ? val : true;
  }
  /* queryParams = 
     {
      key:"asdfghjkl1234567890",
      val:"123",
      val2:true,
      val3:"other"
     }
  */
  return queryParams;
}

Además, esta función se puede mejorar

Answer 4

La capacidad de analizar cadenas de consulta se eliminó de V4 porque a lo largo de los años ha habido solicitudes para admitir diferentes implementaciones. Con eso, el equipo decidió que sería mejor que los usuarios decidieran cómo sería esa implementación. Recomendamos importar una cadena de consulta lib. Aquí hay uno que uso

const queryString = require(''query-string'');

const parsed = queryString.parse(props.location.search);

También puede usar new URLSearchParams si desea algo nativo y funciona para sus necesidades

const params = new URLSearchParams(props.location.search);
const foo = params.get(''foo''); // bar

Puedes leer más sobre la decisión here

Answer 5

La respuesta aceptada funciona bien, pero si no desea instalar un paquete adicional, puede usar esto:

getUrlParameter = (name) => {
    name = name.replace(/[/[]/, ''//['').replace(/[/]]/, ''//]'');
    let regex = new RegExp(''[//?&]'' + name + ''=([^&#]*)'');
    let results = regex.exec(window.location.search);
    return results === null ? '''' : decodeURIComponent(results[1].replace(//+/g, '' ''));
  };

Dado http://www.google.co.in/?key=value

getUrlParameter(''key'');

devolverá value

Answer 6

La respuesta dada es sólida.

Si desea usar el módulo qs lugar de query-string de query-string (son casi iguales en popularidad), aquí está la sintaxis:

const query = qs.parse(props.location.search, {
  ignoreQueryPrefix: true
})

La opción ignoreQueryPrefix es ignorar el signo de interrogación principal.

Answer 7

Sin necesidad de ningún paquete:

const params = JSON.parse(JSON.stringify(this.props.match.params));

Entonces puede alcanzar los parámetros relacionados con params.id