reactjs - source - react router switch
¿Cómo se actualizan mediante programación los parámetros de consulta en react-router? (7)
import { browserHistory } from ''react-router'';
/**
* @param {Object} query
*/
export const addQuery = (query) => {
const location = Object.assign({}, browserHistory.getCurrentLocation());
Object.assign(location.query, query);
// or simple replace location.query if you want to completely change params
browserHistory.push(location);
};
/**
* @param {...String} queryNames
*/
export const removeQuery = (...queryNames) => {
const location = Object.assign({}, browserHistory.getCurrentLocation());
queryNames.forEach(q => delete location.query[q]);
browserHistory.push(location);
};
o
import { withRouter } from ''react-router'';
import { addQuery, removeQuery } from ''../../utils/utils-router'';
function SomeComponent({ location }) {
return <div style={{ backgroundColor: location.query.paintRed ? ''#f00'' : ''#fff'' }}>
<button onClick={ () => addQuery({ paintRed: 1 })}>Paint red</button>
<button onClick={ () => removeQuery(''paintRed'')}>Paint white</button>
</div>;
}
export default withRouter(SomeComponent);
Parece que no puedo encontrar cómo actualizar los parámetros de consulta con react-router sin usar
<Link/>
.
hashHistory.push(url)
no parece registrar parámetros de consulta, y no parece que pueda pasar un objeto de consulta ni nada como segundo argumento.
¿Cómo se cambia la URL de
/shop/Clothes/dresses
a
/shop/Clothes/dresses?color=blue
en react-router sin usar
<Link>
?
¿Y es una función
onChange
realmente la única forma de escuchar los cambios de consulta?
¿Por qué los cambios en las consultas no se detectan y reaccionan automáticamente, como ocurre con los cambios en los parámetros?
Dentro del método
push
de
hashHistory
, puede especificar sus parámetros de consulta.
Por ejemplo,
history.push({
pathname: ''/dresses'',
search: ''?color=blue''
})
o
history.push(''/dresses?color=blue'')
Puede consultar este
repository
para obtener ejemplos adicionales sobre el uso del
history
Ejemplo usando el paquete react-router v4, redux-thunk y react-router-redux (5.0.0-alpha.6).
Cuando el usuario usa la función de búsqueda, quiero que pueda enviar un enlace de URL para la misma consulta a un colega.
import { push } from ''react-router-redux'';
import qs from ''query-string'';
export const search = () => (dispatch) => {
const query = { firstName: ''John'', lastName: ''Doe'' };
//API call to retrieve records
//...
const searchString = qs.stringify(query);
dispatch(push({
search: searchString
}))
}
Prefiero que uses la siguiente función que es estilo
ES6
:
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;
}, {}
)
: {}
};
Usar el módulo de query-string es el recomendado cuando necesita un módulo para analizar su cadena de consulta con facilidad.
componentWillMount() {
var query = queryString.parse(this.props.location.search);
if (query.token) {
window.localStorage.setItem("jwt", query.token);
store.dispatch(push("/"));
}
}
Aquí, estoy redirigiendo a mi cliente desde el servidor Node.js después de la autenticación exitosa de Google-Passport, que está redirigiendo de nuevo con el token como parámetro de consulta.
Lo estoy analizando con el módulo de cadena de consulta, guardándolo y actualizando los parámetros de consulta en la url con push desde react-router-redux .
La respuesta de John
es correcta.
Cuando estoy tratando con parámetros, también necesito la interfaz
URLSearchParams
:
this.props.history.push({
pathname: ''/client'',
search: "?" + new URLSearchParams({clientId: clientId}).toString()
})
Es posible que también necesite envolver su componente con un HOC
withRouter
por ejemplo.
export default withRouter(YourComponent);
.
for react-router v4.3,
const addQuery = (key, value) => {
let pathname = props.location.pathname;
// returns path: ''/app/books''
let searchParams = new URLSearchParams(props.location.search);
// returns the existing query string: ''?type=fiction&author=fahid''
searchParams.set(key, value);
this.props.history.push({
pathname: pathname,
search: searchParams.toString()
});
};
const removeQuery = (key) => {
let pathname = props.location.pathname;
// returns path: ''/app/books''
let searchParams = new URLSearchParams(props.location.search);
// returns the existing query string: ''?type=fiction&author=fahid''
searchParams.delete(key);
this.props.history.push({
pathname: pathname,
search: searchParams.toString()
});
};
```
```
function SomeComponent({ location }) {
return <div>
<button onClick={ () => addQuery(''book'', ''react'')}>search react books</button>
<button onClick={ () => removeQuery(''book'')}>remove search</button>
</div>;
}
```
// To know more on URLSearchParams from
[Mozilla:][1]
var paramsString = "q=URLUtils.searchParams&topic=api";
var searchParams = new URLSearchParams(paramsString);
//Iterate the search parameters.
for (let p of searchParams) {
console.log(p);
}
searchParams.has("topic") === true; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === null; // true
searchParams.append("topic", "webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic", "More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"
[1]: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams