Comment obtenir la valeur du paramètre de chaîne de requête

Réagir Routeur v4

À l'Aide de component

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

this.props.match.params.id

Le composant est automatiquement rendu avec les accessoires de route.

À l'Aide de render

<Route path="/users/:id" render={(props) => <UserPage {...props} />}/> 

this.props.match.params.id

Les accessoires de Route sont passés à la fonction de rendu.

Réagir Routeur v4 n'a plus le props.location.query objet (voir github discussion). Donc, la réponse acceptée ne fonctionnera pas pour les nouveaux projets.

Une solution pour v4 consiste à utiliser une bibliothèque externe query-string pour analyser le 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'}

Réagir Routeur v4

Avec React Router v4, le this.props.location.query n'existe plus. Vous devez utiliser this.props.location.search au lieu de cela et analysez les paramètres de requête soit par vous même ou en utilisant un package existant tel que query-string.

Exemple

Voici un exemple minimal utilisant React Router v4 et la bibliothèque 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);

Rationnelle

La rationale de L'équipe du routeur React pour supprimer la propriété query est la suivante:

Il existe un certain nombre de paquets populaires qui font une analyse/stringification de chaîne de requête légèrement différemment, et chacune de ces différences peut être la manière "correcte" pour certains utilisateurs et "incorrecte" pour d'autres. Si Réagissent Routeur choisi le "bon", il ne serait bon pour certaines personnes. Ensuite, il faudrait ajouter un moyen pour les autres utilisateurs de remplacer dans leur package d'analyse de requête préféré. Il n'y a pas d'utilisation interne de la chaîne de recherche par React Router qui l'oblige à analyser la clé-valeur paires, donc il n'a pas besoin de choisir lequel d'entre eux devrait être "bon".

[...]

L'approche adoptée pour 4.0 consiste à supprimer toutes les fonctionnalités "batteries incluses" et à revenir au routage de base. Si vous avez besoin d'une analyse de chaîne de requête ou d'un chargement asynchrone ou d'une intégration Redux ou d'autre chose de très spécifique, vous pouvez l'ajouter avec une bibliothèque spécifiquement pour votre cas d'utilisation. Moins cruft est emballé dans ce que vous n'avez pas besoin et vous pouvez personnaliser les choses à vos préférences et besoins.

Vous pouvez trouver la discussion complète sur GitHub .

Vous pouvez vérifier le react-router , en simple, vous pouvez utiliser le code pour obtenir le paramètre de requête tant que vous avez défini dans votre routeur:

this.props.params.userId

Si votre Routeur est comme ceci

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

Vous obtiendrez cet identifiant comme ceci

this.props.match.params.id

Réagir Routeur v4

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

Veuillez noter qu'il est actuellement expérimentale.

Vérifiez la compatibilité du navigateur ici: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/URLSearchParams#Browser_compatibility

this.props.params.your_param_name ça marchera.

C'est la façon d'obtenir les paramètres de votre chaîne de requête.
Veuillez faire console.log(this.props); pour explorer toutes les possibilités.

Si vous n'obtenez pas le this.props... vous vous attendiez sur la base des autres réponses, vous devrez peut-être utiliser withRouter (docs v4):

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

React router à partir de v4, vous ne pouvez plus accéder directement au query params dans son objet location. La raison étant

Il existe un certain nombre de paquets populaires qui font une chaîne de requête parsing / stringifying légèrement différemment, et chacun d'entre eux les différences peuvent être la manière "correcte" pour certains utilisateurs et " incorrecte" pour les autres. Si React Router a choisi le "bon", ce ne serait que droit pour certaines personnes. Ensuite, il faudrait ajouter un moyen pour d'autres utilisateurs à remplacer dans leur paquet d'analyse de requête préféré. Il est aucune utilisation interne de la chaîne de recherche par React Router qui l'exige pour analyser les paires clé-valeur, il n'est donc pas nécessaire de choisir l'un d'eux doit être "de droite".

Après avoir inclus cela, il serait juste plus logique d'analyser simplement l'emplacement.recherchez dans vos composants de vue qui attendent un objet de requête.

Vous pouvez le faire génériquement en remplaçant le withRouter de react-router comme

CustomWithRouter.js

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)

Dans le composant où vous devez accéder aux paramètres, vous pouvez utiliser

this.props.location.state.from.search

Qui révélera toute la chaîne de requête (Tout après le signe ?)

Dans React Router v4 seulement withRoute est correcte façon

Vous pouvez accéder aux propriétés de l'objet historique et à la correspondance la plus proche via le composant d'ordre supérieur withRouter. withRouter transmettra les accessoires de correspondance, d'emplacement et d'historique mis à jour au composant encapsulé chaque fois qu'il sera rendu.

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)

Https://reacttraining.com/react-router/web/api/withRouter

J'ai eu du mal à résoudre ce problème. Si aucun des travaux ci-dessus, vous pouvez essayer cela à la place. J'utilise l'application create-react

Exigences

Réagir-routeur-dom": "^4.3.1"

Solution

À l'emplacement où le routeur est spécifié

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

Ajoutez le nom du paramètre que vous souhaitez transmettre comme ceci

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

Sur la page où vous affichez/path, vous pouvez spécifier ceci pour afficher le nom du paramètre call id comme ce

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

À la fin où vous exportez par défaut

export default withRouter(Component);

N'oubliez pas d'inclure l'importation

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

Lorsque la console.journal(ce.props) vous seriez capable de ce qui a été transmis. Amuse-toi bien!

J'ai utilisé un paquet externe appelé query-string pour analyser le paramètre url comme ceci.

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}));
}

, Vous pouvez voir la requête en utilisant:

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

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
    })

}

Solution la plus simple!

Dans le routage:

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

Dans le code react:

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 });
      });
  }