¿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>
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.