reactjs - link - react router get params

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

Question

¿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 después de la redirección de sus servidores?

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

Intenté con la siguiente configuración de rutas, pero :redirectParam no atrapa el parámetro mencionado:

<Router>
  <Route path="/" component={Main}>
    <Route path="signin" component={SignIn}>
      <Route path=":redirectParam" component={TwitterSsoButton} />
    </Route>
  </Route>
</Router>

Answer 1

React Router v4

Usando component

<Route path="/users/:id" component={UserPage}/> 

this.props.match.params.id

El componente se procesa automáticamente con los accesorios de ruta.

Usando render

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

Answer 2

En el componente donde necesita acceder a los parámetros que puede usar

this.props.location.state.from.search

que revelará toda la cadena de consulta (todo después del signo ? )

Answer 3

Hasta donde sé, hay tres métodos para hacerlo.

1.utilice la expresión regular para obtener la cadena de consulta.

2.Puedes usar la API del navegador. imagen, la url actual es así:

http://www.google.com.au?token=123

solo queremos obtener 123;

primero

 const query = new URLSearchParams(this.props.location.search);

Entonces

const token = query.get(''token'')
console.log(token)//123

3. use una tercera biblioteca llamada ''query-string''. Primero instálalo

npm i query-string

Luego impórtelo al archivo javascript actual:

 import queryString from ''query-string''

El siguiente paso es obtener ''token'' en la url actual, haga lo siguiente:

const value=queryString.parse(this.props.location.search);
const token=value.token;
console.log(''token'',token)//123

Espero eso ayude.

Actualizado el 25/02/2019

4. si la url actual tiene el siguiente aspecto:

http://www.google.com.au?app=home&act=article&aid=160990

Definimos una función para obtener los parámetros:

function getQueryVariable(variable)
{
        var query = window.location.search.substring(1);
        console.log(query)//"app=article&act=news_content&aid=160990"
        var vars = query.split("&");
        console.log(vars) //[ ''app=article'', ''act=news_content'', ''aid=160990'' ]
        for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    console.log(pair)//[ ''app'', ''article'' ][ ''act'', ''news_content'' ][ ''aid'', ''160990'' ] 
        if(pair[0] == variable){return pair[1];}
         }
         return(false);
}

Podemos obtener ''ayuda'' de la siguiente manera:

getQueryVariable(''aid'') //160990

Answer 4

La solución más simple!

en enrutamiento:

   <Route path="/app/someUrl/:id" exact component={binder} />

en código de reacción:

componentDidMount() {
    var id = window.location.href.split(''/'')[window.location.href.split(''/'').length - 1];
    var queryString = "http://url/api/controller/" + id
    $.getJSON(queryString)
      .then(res => {
        this.setState({ data: res });
      });
  }

Answer 5

Me costó mucho resolver este problema. Si ninguno de los anteriores funciona, puede probar esto en su lugar. Estoy usando la aplicación create-react-app

Requisitos

react-router-dom ":" ^ 4.3.1 "

Solución

En la ubicación donde se especifica el enrutador

<Route path="some/path" ..../>

Agregue el nombre del parámetro que le gustaría pasar de esta manera

<Route path="some/path/:id" .../>

En la página donde está renderizando algunos / ruta puede especificar esto para ver el nombre del parámetro id de llamada como este

componentDidMount(){
  console.log(this.props);
  console.log(this.props.match.params.id);
}

Al final donde exportas por defecto

export default withRouter(Component);

Recuerde incluir importación

import { withRouter } from ''react-router-dom''

Cuando console.log (this.props), podrá saber qué se ha transmitido. ¡Que te diviertas!

Answer 6

Puede ver la consulta usando:

console.log(this.props.location.query)

Answer 7

Si no this.props ... que estabas esperando en base a las otras respuestas, es posible que necesites usar withRouter ( withRouter ):

import { compose, withPropsOnChange } from ''recompose'';
import { withRouter } from ''react-router'';
import queryString from ''query-string'';

const propsWithQuery = withPropsOnChange(
    [''location'', ''match''],
    ({ location, match }) => {
        return {
            location: {
                ...location,
                query: queryString.parse(location.search)
            },
            match
        };
    }
);

export default compose(withRouter, propsWithQuery)

Answer 8

Si su enrutador es así

<Route exact path="/category/:id" component={ProductList}/>

Obtendrá esa identificación como esta

this.props.match.params.id

Answer 9

Tal vez un poco tarde, pero este gancho de reacción puede ayudarlo a obtener / establecer valores en la consulta de URL: https://github.com/rudyhuynh/use-url-search-params (escrito por mí).

Funciona con o sin react-router . A continuación se muestra el código en su caso:

import React from "react";
import { useUrlSearchParams } from "use-url-search-params";

const MyComponent = () => {
  const [params, setParams] = useUrlSearchParams()
  return (
    <div>
      __firebase_request_key: {params.__firebase_request_key}
    </div>
  )
}

Answer 10

Usé un paquete externo llamado query-string para analizar el parámetro url de esta manera.

import React, {Component} from ''react''
import { parse } from ''query-string'';

resetPass() {
    const {password} = this.state;
    this.setState({fetching: true, error: undefined});
    const query = parse(location.search);
    return fetch(settings.urls.update_password, {
        method: ''POST'',
        headers: {''Content-Type'': ''application/json'', ''Authorization'': query.token},
        mode: ''cors'',
        body: JSON.stringify({password})
    })
        .then(response=>response.json())
        .then(json=>{
            if (json.error)
                throw Error(json.error.message || ''Unknown fetch error'');
            this.setState({fetching: false, error: undefined, changePassword: true});
        })
        .catch(error=>this.setState({fetching: false, error: error.message}));
}

Answer 11

puede verificar el react-router , de manera simple, puede usar el código para obtener el parámetro de consulta siempre que lo haya definido en su enrutador:

this.props.params.userId

Answer 12

React router desde v4 en adelante ya no le da los query params directamente en su objeto de location . La razón es

Hay una serie de paquetes populares que analizan / secuencian cadenas de consultas de forma ligeramente diferente, y cada una de estas diferencias puede ser la forma "correcta" para algunos usuarios e "incorrecta" para otros. Si React Router eligió el "correcto", solo sería adecuado para algunas personas. Luego, necesitaría agregar una forma para que otros usuarios sustituyan en su paquete de análisis de consultas preferido. No hay uso interno de la cadena de búsqueda por React Router que requiera analizar los pares clave-valor, por lo que no es necesario elegir cuál de estos debe ser "correcto".

Una vez incluido eso, tendría más sentido simplemente analizar location.search en los componentes de la vista que esperan un objeto de consulta.

Puede hacer esto genéricamente anulando withRouter desde react-router como

customWithRouter.js

import React from ''react''
import PropTypes from ''prop-types''
import { withRouter } from ''react-router''

// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

  render() {
    const { match, location, history } = this.props

    return (
      <div>You are now at {location.pathname}</div>
    )
  }
}

// Create a new component that is "connected" (to borrow redux terminology) to the router.  
const TwitterSsoButton = withRouter(ShowTheLocation)  

// This gets around shouldComponentUpdate
withRouter(connect(...)(MyComponent))

// This does not
connect(...)(withRouter(MyComponent))

Answer 13

this.props.params.your_param_name funcionará.

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

Answer 14

En React Router v4 solo conRoute es la forma correcta

Puede obtener acceso a las propiedades del objeto de historial y la coincidencia más cercana a través del componente de orden superior withRouter. withRouter pasará los accesorios de coincidencia, ubicación e historial actualizados al componente empaquetado cada vez que se procese.

import React from ''react''
import PropTypes from ''prop-types''
import { withRouter } from ''react-router''

// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

  render() {
    const { match, location, history } = this.props

    return (
      <div>You are now at {location.pathname}</div>
    )
  }
}

// Create a new component that is "connected" (to borrow redux
// terminology) to the router.
const ShowTheLocationWithRouter = withRouter(ShowTheLocation)

withRouter

Answer 15

React Router v3

Con React Router v3, puede obtener una 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''}

React Router v4

Con React Router v4, this.props.location.query ya no existe. En su lugar, debe usar this.props.location.search y analizar los parámetros de consulta usted mismo o utilizando un paquete existente como query-string .

Ejemplo

Aquí hay un ejemplo mínimo con React Router v4 y la biblioteca de query-string .

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

El equipo racional de React Router para eliminar la propiedad de query es:

Hay una serie de paquetes populares que analizan / secuencian cadenas de consultas de forma ligeramente diferente, y cada una de estas diferencias puede ser la forma "correcta" para algunos usuarios e "incorrecta" para otros. Si React Router eligió el "correcto", solo sería adecuado para algunas personas. Luego, necesitaría agregar una forma para que otros usuarios sustituyan en su paquete de análisis de consultas preferido. No hay uso interno de la cadena de búsqueda por React Router que requiera analizar los pares clave-valor, por lo que no es necesario elegir cuál de estos debe ser "correcto".

[...]

El enfoque que se está adoptando para 4.0 es eliminar todas las características de "baterías incluidas" y volver al enrutamiento básico. Si necesita análisis de cadenas de consulta o carga asíncrona o integración de Redux o algo más específico, puede agregarlo con una biblioteca específicamente para su caso de uso. Se incluye menos cruft que no necesita y puede personalizar las cosas según sus preferencias y necesidades específicas.

Puedes encontrar la discusión completa en GitHub .

Answer 16

React Router 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? 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, puede acceder a ellos mediante

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 .

React Router v4 y React Router v5

React Router v4 ya no analiza la consulta por usted, pero solo puede acceder a ella a través de this.props.location.search . Por razones, consulte la respuesta de nbeuchat .

Por ejemplo, con la biblioteca de query-string importada como qs , podría hacer

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

Consulte esta respuesta para obtener más ideas sobre cómo analizar la cadena de búsqueda.

Además, si su componente no es un hijo directo de un Switch , debe usar withRouter para acceder a cualquiera de los accesorios provistos por el enrutador.

General

Sugerencia de nizam.sp para hacer

console.log(this.props)

Será útil en cualquier caso.

Answer 17

React Router v4

const urlParams = new URLSearchParams(this.props.location.search)
const key = urlParams.get(''__firebase_request_key'')

Tenga en cuenta que actualmente es experimental.

Verifique la compatibilidad del navegador aquí: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/URLSearchParams#Browser_compatibility

Answer 18

React Router v4 ya no tiene el objeto props.location.query (ver discusión de GitHub ). Por lo tanto, la respuesta aceptada no funcionará para proyectos más nuevos.

Una solución para v4 es utilizar una query-string biblioteca externa para analizar props.location.search

const qs = require(''query-string'');
//or
import * as qs from ''query-string'';

console.log(location.search);
//=> ''?foo=bar''

const parsed = qs.parse(location.search);
console.log(parsed);
//=> {foo: ''bar''}

Answer 19

export class ClassName extends Component{
      constructor(props){
        super(props);
        this.state = {
          id:parseInt(props.match.params.id,10)
        }
    }
     render(){
        return(
          //Code
          {this.state.id}
        );
}

Answer 20

let data = new FormData();
data.append(''file'', values.file);

Answer 21

componentDidMount(){
    //http://localhost:3000/service/anas
    //<Route path="/service/:serviceName" component={Service} />
    const {params} =this.props.match;
    this.setState({ 
        title: params.serviceName ,
        content: data.Content
    })
}