switch source react link example doom reactjs react-router

reactjs - source - react router switch



¿Cómo se actualizan mediante programación los parámetros de consulta en react-router? (7)

De DimitriDushkin en GitHub :

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.

http: // localhost: 3000? token = xxx-xxx-xxx

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