reactjs - querystring - react url query params

Querystring en el enrutador de reacción

Question

Estoy tratando de establecer una ruta de ruta con una cadena de consulta. Algo en las líneas de:

www.mywebsite.com/results?query1=:query1&query2=:query2&query3=:query3

Me gustaría que la transición al componente "Resultados" de la siguiente manera:

<Route path="/" component={Main}>
  <IndexRoute component={Home} />
  <Route path="results?query1=:query1&query2=:query2&query3=:query3"
    component={SearchResults} />
</Route>

En el contenedor SearchResults me gustaría poder tener acceso a los parámetros query1, query2 y query3.

No he podido hacerlo funcionar. Obtuve el siguiente error:

bundle.js: 22627 Advertencia: [reaccion-enrutador] La ubicación "/ results? query1 = 1 & query2 = 2 & query3 = 3" no coincide con ninguna ruta

Intenté seguir los pasos de la siguiente guía: (Sección: ¿Qué pasa con los parámetros de cadena de consulta?) https://www.themarketingtechnologist.co/react-router-an-introduction/

¿Puedo obtener ayuda aquí?

Answer 1

Si está utilizando React Router v2.xx, puede acceder a los parámetros de consulta a través del objeto location.query que se pasa a su componente Route.

En otras palabras, puede volver a trabajar su ruta para que se vea como la siguiente:

<Route path="results" component={SearchResults} />

Y luego, dentro de su componente this.props.location.query.query1 , use this.props.location.query.query1 (similar para query2 y query3 ) para acceder a los valores de los parámetros de consulta.

EDIT: este sigue siendo el caso de React Router v3.xx.

Answer 2

Si está utilizando React Router> = v4 location.query ya no está disponible. Puede conectar una biblioteca externa (como https://www.npmjs.com/package/query-string ), o usar algo como esto:

const search = props.location.search; // could be ''?foo=bar''
const params = new URLSearchParams(search);
const foo = params.get(''foo''); // bar

(solo tenga en cuenta que URLSearchParams() no es compatible con Internet Explorer)