Solución:
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 decidan cómo se ve 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 puedes usar new URLSearchParams si quieres algo nativo y funciona para tus necesidades
const params = new URLSearchParams(props.location.search);
const foo = params.get('foo'); // bar
Puedes leer más sobre la decisión aquí.
La respuesta dada es sólida.
Si desea utilizar el módulo qs en lugar de query-string (tienen aproximadamente la misma popularidad), aquí está la sintaxis:
const query = qs.parse(props.location.search, {
ignoreQueryPrefix: true
})
los ignoreQueryPrefix La opción es ignorar el signo de interrogación inicial.
Otro enfoque útil podría ser utilizar los URLSearchParams como esto;
let { search } = useLocation();
const query = new URLSearchParams(search);
const paramField = query.get('field');
const paramValue = query.get('value');
Limpio, legible y no requiere módulo. Más información a continuación;
- https://reacttraining.com/react-router/web/example/query-parameters
- https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams