0
317
ViewsCómo analizar la cadena de consulta en react-router v4
En react-router v3, pude acceder a él con props.location.query.foo (si la ubicación actual fuera ?foo=bar )
En react-router-dom@4.0.0 props.location solo tiene props.location.search con una cadena como ?foo=bar&other=thing .
Tal vez necesito analizar y deconstruir manualmente esa cadena para encontrar el valor de foo u other .
Captura de pantalla de console.log(this.props) : 
(Observe cómo desde ?artist=band aquí me gustaría obtener el valor del artist que es la band de valor)
3 answers
Answer question0
Parece que ya asumiste lo correcto. La capacidad de analizar cadenas de consulta se eliminó de V4 porque ha habido solicitudes a lo largo de los años 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. El que mencionas me ha funcionado muy bien hasta ahora.
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 search = props.location.search; // could be '?foo=bar' const params = new URLSearchParams(search); const foo = params.get('foo'); // barPuedes leer más sobre la decisión aquí
0
Ofrezco mi pequeña función de forma ES6 , increíble, liviana y útil:
getQueryStringParams = query => { return query ? (/^[?#]/.test(query) ? query.slice(1) : query) .split('&') .reduce((params, param) => { let [key, value] = param.split('='); params[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : ''; return params; }, {} ) : {} };Todo está aquí, espero poder ayudarte.
0
Es posible que obtenga el siguiente error al crear una compilación de producción optimizada al usar el módulo de cadena de consulta .
No se pudo minimizar el código de este archivo: ./node_modules/query-string/index.js:8
Para superar esto, use el módulo alternativo llamado stringquery que hace el mismo proceso sin ningún problema mientras ejecuta la compilación.
import querySearch from "stringquery"; var query = querySearch(this.props.location.search);Gracias.