Estoy usando react y react-router para mi aplicación en el lado del cliente. Parece que no puedo averiguar cómo obtener los siguientes parámetros de consulta de una URL como:
http://xmen.database/search#/?status=APPROVED&page=1&limit=20Mis rutas se ven así (la ruta es totalmente incorrecta, lo sé):
var routes = ( <Route> <DefaultRoute handler={SearchDisplay}/> <Route name="search" path="?status=:status&page=:page&limit=:limit" handler={SearchDisplay}/> <Route name="xmen" path="candidate/:accountId" handler={XmenDisplay}/> </Route> );Mi ruta funciona bien, pero no estoy seguro de cómo formatear la ruta para obtener los parámetros que quiero. ¡Agradezco cualquier ayuda en esto!
Nota: Copiar/Pegar del comentario. ¡Asegúrate de darle me gusta a la publicación original!
Escribiendo en es6 y usando react 0.14.6 / react-router 2.0.0-rc5. Uso este comando para buscar los parámetros de consulta en mis componentes:
this.props.location.queryCrea un hash de todos los parámetros de consulta disponibles en la url.
Para React-Router v4, vea esta respuesta . Básicamente, use this.props.location.search para obtener la cadena de consulta y analizarla con el paquete query-string o URLSearchParams :
const params = new URLSearchParams(paramsString); const tags = params.get('tags');Las respuestas anteriores no funcionarán en react-router v4 . Esto es lo que hice para resolver el problema:
Primero instale la cadena de consulta que se requerirá para el análisis.
npm install -save query-string
Ahora , en el componente enrutado, puede acceder a la cadena de consulta no analizada como esta
this.props.location.search
Puede verificarlo iniciando sesión en la consola.
Finalmente analizar para acceder a los parámetros de consulta
const queryString = require('query-string'); var parsed = queryString.parse(this.props.location.search); console.log(parsed.param); // replace param with your own Entonces, si la consulta es como ?hello=world
console.log(parsed.hello) registrará el world
VIEJO (anterior a v4):
Escribiendo en es6 y usando react 0.14.6 / react-router 2.0.0-rc5. Uso este comando para buscar los parámetros de consulta en mis componentes:
this.props.location.queryCrea un hash de todos los parámetros de consulta disponibles en la url.
ACTUALIZACIÓN (React Router v4+):
this.props.location.query en React Router 4 ha sido eliminado (actualmente usando v4.1.1) más sobre el problema aquí: https://github.com/ReactTraining/react-router/issues/4410
Parece que quieren que uses tu propio método para analizar los parámetros de consulta, actualmente usan esta biblioteca para llenar el vacío: https://github.com/sindresorhus/query-string