Cómo obtener el valor del parámetro de la cadena de consulta

¿Cómo puedo definir una ruta en mi archivo routes.jsx para capturar el valor del parámetro __firebase_request_key de una URL generada por el proceso de inicio de sesión único de Twitter tras la redirección desde sus servidores?

http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla

Lo he intentado con la siguiente configuración de rutas, pero el :redirectParam no captura el mencionado parámetro:

<Router>
  <Route path="/" component={Main}>
    <Route path="signin" component={SignIn}>
      <Route path=":redirectParam" component={TwitterSsoButton} />
    </Route>
  </Route>
</Router>
Uwe Keim
Pregunta editada 27º mayo 2018 в 6:37
Programación
reactjs react-router
12º febrero 2016 в 12:19
11 vistas
Solución

React Router v3

React Router ya analiza la ubicación por ti y la pasa a tu RouteComponent como props. Puedes acceder a la parte de la consulta (después de ? en la url) a través de

this.props.location.query.__firebase_request_key

Si buscas los valores de los parámetros de la ruta, separados con dos puntos (:) dentro del router, estos son accesibles a través de

this.props.match.params.redirectParam

Esto se aplica a las últimas versiones de React Router v3 (no estoy seguro de cuál). Las versiones anteriores del enrutador fueron reportadas para usar this.props.params.redirectParam.

React Router v4 y React Router v5

React Router v4 ya no analiza la consulta por ti, sino que sólo puedes acceder a ella a través de this.props.location.search. Para ver las razones, consulte nbeuchat's answer.

Por ejemplo, con la librería query-string importada como qs podrías hacer

qs.parse(this.props.location.search, { ignoreQueryPrefix: true }).__firebase_request_key

Ver esta respuesta para algunas ideas más sobre el análisis de la cadena de búsqueda.

Además, si su componente no es un hijo directo de un Switch necesita usar withRouter para acceder a cualquiera de los props proporcionados por el router.

**Generalidades

nizam.sp's sugerencia de hacer

console.log(this.props)

será útil en cualquier caso.

Christian
Respuesta editada 14º mayo 2019 в 1:03
Comentarios (11)

puede comprobar el react-router, en simple, puede utilizar el código para obtener el parámetro de consulta, siempre y cuando se define en su router:

this.props.params.userId
Comentarios (1)

this.props.params.your_param_name funcionará.

Esta es la forma de obtener los parámetros de su cadena de consulta; Por favor, haz console.log(this.props); para explorar todas las posibilidades.

Comentarios (0)