¿Cómo obtener el valor del parámetro de la cadena de consulta?
¿Cómo puedo definir una ruta en mi archivo route.jsx para capturar el __firebase_request_keyvalor del parámetro de una URL generada por el proceso de inicio de sesión único de Twitter después de la redirección desde sus servidores?
http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla
Intenté con la siguiente configuración de rutas, pero :redirectParamno detecta el parámetro mencionado:
<Router>
<Route path="/" component={Main}>
<Route path="signin" component={SignIn}>
<Route path=":redirectParam" component={TwitterSsoButton} />
</Route>
</Route>
</Router>
React Router v6, usando ganchos
En react-router-dom v6 hay un nuevo enlace llamado useSearchParams . Entonces con
const [searchParams, setSearchParams] = useSearchParams();
searchParams.get("__firebase_request_key")
conseguirás "blablabla". Tenga en cuenta que searchParams es una instancia de URLSearchParams, que también implementa un iterador, por ejemplo, para usar Object.fromEntries, etc.
React Router v4/v5, sin ganchos, genérico
React Router v4 ya no analiza la consulta por usted, pero solo puede acceder a ella a través de this.props.location.search(o useLocation, ver más abajo). Para conocer los motivos, consulte la respuesta de nbeuchat .
Por ejemplo, con la biblioteca qs importada como qspodría hacerlo
qs.parse(this.props.location.search, { ignoreQueryPrefix: true }).__firebase_request_key
Otra biblioteca sería cadena de consulta . Consulte esta respuesta para obtener más ideas sobre cómo analizar la cadena de búsqueda. Si no necesita compatibilidad con IE, también puede usar
new URLSearchParams(this.props.location.search).get("__firebase_request_key")
Para los componentes funcionales, los reemplazaría this.props.locationcon el gancho useLocation . Tenga en cuenta que puede usar window.location.search, pero esto no permitirá activar el renderizado de React en caso de cambios. Si su componente (no funcional) no es hijo directo de a, Switchdebe usar withRouter para acceder a cualquiera de los accesorios proporcionados por el enrutador.
Reaccionar enrutador v3
React Router ya analiza la ubicación por usted y la pasa a su RouteComponent como accesorios. Puede acceder a la parte de consulta (después de ? en la URL) a través de
this.props.location.query.__firebase_request_key
Si está buscando los valores de los parámetros de ruta, separados por dos puntos (:) dentro del enrutador, se puede acceder a ellos 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). Se informó que las versiones anteriores del enrutador usaban this.props.params.redirectParam.
General
sugerencia de nizam.sp para hacer
console.log(this.props)
será útil en cualquier caso.
Reaccionar enrutador v4
Usandocomponent
<Route path="/users/:id" component={UserPage}/>
this.props.match.params.id
El componente se representa automáticamente con los accesorios de ruta.
Usandorender
<Route path="/users/:id" render={(props) => <UserPage {...props} />}/>
this.props.match.params.id
Los accesorios de ruta se pasan a la función de renderizado.
Reaccionar enrutador v3
Con React Router v3, puede obtener la cadena de consulta de this.props.location.search(?qs1=naisarg&qs2=parmar). Por ejemplo, con let params = queryString.parse(this.props.location.search), daría{ qs1 : 'naisarg', qs2 : 'parmar'}
Reaccionar enrutador v4
Con React Router v4, ya this.props.location.queryno existe. En su lugar, debe utilizar this.props.location.searchy analizar los parámetros de consulta usted mismo o utilizando un paquete existente como query-string.
Ejemplo
Aquí hay un ejemplo mínimo usando React Router v4 y la query-stringbiblioteca.
import { withRouter } from 'react-router-dom';
import queryString from 'query-string';
class ActivateAccount extends Component{
someFunction(){
let params = queryString.parse(this.props.location.search)
...
}
...
}
export default withRouter(ActivateAccount);
Racional
La racionalidad del equipo de React Router para eliminar la querypropiedad es:
Hay varios paquetes populares que realizan consultas de análisis/encadenamiento de cadenas de manera ligeramente diferente, y cada una de estas diferencias puede ser la forma "correcta" para algunos usuarios e "incorrecta" para otros. Si React Router eligiera el "correcto", solo sería adecuado para algunas personas. Luego, sería necesario agregar una forma para que otros usuarios la sustituyan en su paquete de análisis de consultas preferido. React Router no utiliza internamente la cadena de búsqueda que requiere que analice los pares clave-valor, por lo que no es necesario elegir cuál de ellos debería ser "correcto".
[...]
El enfoque que se está adoptando para 4.0 es eliminar todas las características del tipo "baterías incluidas" y volver al enrutamiento básico. Si necesita análisis de cadenas de consulta, carga asíncrona, integración de Redux o algo muy específico, puede agregarlo con una biblioteca específica para su caso de uso. Se incluyen menos cosas que no necesita y puede personalizar las cosas según sus preferencias y necesidades específicas.
Puede encontrar la discusión completa en GitHub .
