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 los parámetros de consulta en HomePage
componente.
He encontrado location.search
param, que se parece a esto: key=value`, por lo que no se analiza.
¿Cuál es la forma correcta de obtener los parámetros de consulta con react-router v4?
La capacidad de analizar cadenas de consulta se eliminó de la V4 porque a lo largo de los años se han recibido peticiones para una implementación diferente. Por ello, el equipo decidió que sería mejor que los usuarios decidieran cómo sería esa implementación. Recomendamos importar una librería de cadenas de consulta. Aquí hay una que yo 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 aceptada funciona bien, pero si no quieres instalar un paquete adicional, puedes 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á valor
Estuve investigando sobre params para react router v4, y no'lo usaban para v4, no como react router v2/3. I'll dejar otra función - tal vez alguien lo encontrará útil. Solo necesitas es6 o javascript plano.
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