reactjs - link - Cómo analizar la cadena de consulta en react-router v4

reactjs link example

Question

En react-router v3 podría acceder a él con props.location.query.foo (si la ubicación actual es ?foo=bar )

En [email protected] props.location solo tiene props.location.search es una cadena como ?foo=bar&other=thing .

Tal vez necesito analizar y deconstruir manualmente esa cadena para encontrar el valor para foo u other .

Captura de pantalla de console.log(this.props) : (Observe cómo de ?artist=band aquí me gustaría obtener el valor del artist que es la band valor)

Answer 1

Me alegro de haber encontrado este post. Gracias por los enlaces, después de un par de horas conseguí actualizar mi código.

Para aquellos de ustedes que usan cadenas de consulta, es posible que tengan que hacer algo como

var nameYouWant = queryString.parse(this.props.location.search).nameYouWant;

Esto sucedió en mi caso, y this.props.location.search.theUrlYouWant quiere negarse a trabajar. La segunda opción que mencionó Tyler también me funcionó con algunos ajustes similares.

Answer 2

Ofrezco mi pequeña función de forma ES6 , impresionante, ligera 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.

Answer 3

Parece que ya asumiste lo correcto. La capacidad de analizar cadenas de consulta se eliminó de V4 porque a lo largo de los años se han recibido solicitudes para admitir diferentes implementaciones. Con eso, el equipo decidió que sería mejor para los usuarios decidir cómo se vería esa implementación. Recomendamos importar una cadena de consulta lib. El npmjs.com/package/query-string ha funcionado muy bien hasta ahora.

const queryString = require(''query-string'');
const parsed = queryString.parse(props.location.search);

También puede usar las new URLSearchParams si quiere 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''); // bar

Puedes leer más sobre la decisión here

Answer 4

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

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

Para superar esto, use amablemente el módulo alternativo llamado stringquery que realiza el mismo proceso sin problemas al ejecutar la compilación.

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

Gracias.