wake-up-neo.net

So erhalten Sie den Parameterwert aus der Abfragezeichenfolge

Wie kann ich eine Route in meiner Datei routes.jsx definieren, um den __firebase_request_key-Parameterwert von einer URL zu erfassen, die vom einmaligen Anmeldevorgang von Twitter nach der Umleitung von den Servern generiert wird?

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

Ich habe mit den folgenden Routen versucht, die Konfiguration zu ändern, aber der :redirectParam fängt den erwähnten Parameter nicht ab:

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

React Router v3

Der Reakt-Router analysiert den Standort bereits für Sie und übergibt ihn als Requisiten an Ihre RouteComponent . Sie können auf den Query-Teil (nach? In der URL) über zugreifen

this.props.location.query.__firebase_request_key

Wenn Sie nach den Pfadparameterwerten suchen, die durch einen Doppelpunkt (:) getrennt sind, sind diese über den Router zugänglich

this.props.match.params.redirectParam

Dies gilt für spätere React Router v3-Versionen (nicht sicher, welche). Von älteren Router-Versionen wurde berichtet, dass sie this.props.params.redirectParam verwenden.

React Router v4

React Router v4 analysiert die Abfrage nicht mehr für Sie, Sie können jedoch nur über this.props.location.search darauf zugreifen. Für Gründe siehe nbeuchat's answer .

Z.B. mit query-string library, die als qs importiert wurde, können Sie dies tun

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

Wenn Ihre Komponente nicht direkt einer Switch untergeordnet ist, müssen Sie withRouter verwenden, um auf die vom Router bereitgestellten Requisiten zuzugreifen.

Allgemeines

nizam.sps Vorschlag zu tun

console.log(this.props)

wird auf jeden Fall hilfreich sein.

303
Christian

Reagieren Sie den Router v4

component verwenden

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

this.props.match.params.id

Die Komponente wird automatisch mit den Routenrequisiten gerendert.


render verwenden

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

this.props.match.params.id

Routenrequisiten werden an die Renderfunktion übergeben.

110
spencer.sm

React Router v4

Mit React Router v4 existiert der this.props.location.query nicht mehr. Sie müssen stattdessen this.props.location.search verwenden und die Abfrageparameter entweder von Ihnen selbst analysieren oder ein vorhandenes Paket wie query-string verwenden.

Beispiel

Hier ist ein minimales Beispiel mit React Router v4 und der query-string-Bibliothek.

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

Rational

Das Team des React Routers, das zum Entfernen der query-Eigenschaft sinnvoll ist, lautet:

Es gibt eine Reihe von gängigen Paketen, die die String-Analyse/Stringifizierung etwas anders abfragen, und jeder dieser Unterschiede kann für manche Benutzer die "richtige" und für andere "falsche" Methode sein. Wenn der React Router den "richtigen" auswählte, wäre dies nur für einige Leute richtig. In diesem Fall müssten andere Benutzer die Möglichkeit erhalten, ihr bevorzugtes Paket zur Abfrageanalyse zu ersetzen. Die Suchzeichenfolge wird von React Router nicht intern verwendet, sodass die Schlüssel-Wert-Paare analysiert werden müssen. Daher muss nicht ausgewählt werden, welches der beiden "richtig" sein sollte.

[...]

Der Ansatz für 4.0 besteht darin, alle "batteriebezogenen" Funktionen herauszureißen und nur die Grundfunktionen wiederzuverfolgen. Wenn Sie Abfrage-String-Analyse oder asynchrones Laden oder Redux-Integration oder etwas ganz anderes benötigen, können Sie dies mit einer Bibliothek hinzufügen, die speziell für Ihren Anwendungsfall vorgesehen ist. Weniger Cruft ist in der Verpackung enthalten, die Sie nicht benötigen, und Sie können die Dinge an Ihre speziellen Vorlieben und Bedürfnisse anpassen.

Die vollständige Diskussion finden Sie auf GitHub .

60
nbeuchat

React Router v4 hat nicht mehr denprops.location.queryobject (siehe github discussion). Die akzeptierte Antwort funktioniert daher nicht für neuere Projekte.

Eine Lösung für v4 ist die Verwendung einer externen Bibliothek query-string , um den props.location.search zu analysieren.

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'}
56
JTG

sie können den React-Router überprüfen. In einfachen Fällen können Sie den Code verwenden, um Abfrageparameter abzurufen, solange Sie in Ihrem Router definiert haben:

this.props.params.userId
23
TommyLike

React Router v4

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

Bitte beachten Sie, dass es derzeit experimentell ist. 

Überprüfen Sie die Browserkompatibilität hier: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/URLSearchParams#Browser_compatibility

15
Mike Frenil L

Wenn dein Router so ist

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

Sie werden diese ID so bekommen

this.props.match.params.id
14
Milan Panigrahi

Soweit ich weiß, gibt es drei Methoden, mit denen Sie das tun können.

1.Verwenden Sie einen regulären Ausdruck, um die Abfragezeichenfolge abzurufen.

2.Sie können den Browser api . Image verwenden. Die aktuelle URL ist wie folgt:

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

wir wollen nur 123 bekommen;

Zuerst 

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

Dann

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

3. Verwenden Sie eine dritte Bibliothek mit dem Namen 'query-string' . Installieren Sie sie zuerst

npm i query-string

Dann importieren Sie es in die aktuelle Javascript-Datei:

 import queryString from 'query-string'

Als nächsten Schritt erhalten Sie "Token" in der aktuellen URL. Gehen Sie folgendermaßen vor:

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

Ich hoffe es hilft.

Aktualisiert am 25/02/2019

  1. wenn die aktuelle URL folgendermaßen aussieht:

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

wir definieren eine Funktion, um die Parameter zu erhalten:

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

Wir können "Hilfe" bekommen durch:

getQueryVariable('aid') //160990
10
MING WU

React router ab v4 liefert den query params nicht mehr direkt in seinem location-Objekt. Der Grund dafür ist

Es gibt eine Reihe beliebter Pakete, die die Abfragezeichenfolge .__ abfragen. etwas anders parsing/stringifying, und jedes davon Unterschiede können für manche Benutzer die "richtige" Methode sein und "falsch" für andere. Wenn der Reakt-Router den "richtigen" auswählt, wäre er nur für manche Leute richtig. Dann müsste ein Weg für andere .__ hinzugefügt werden. Benutzer, die in ihrem bevorzugten Paket zur Abfrageanalyse eingesetzt werden sollen. Es gibt Keine interne Verwendung der Suchzeichenfolge durch React Router, die dies erfordert Um die Schlüssel-Wert-Paare zu analysieren, muss nicht ausgewählt werden, welches eine davon sollte "richtig" sein.

Nach der Aufnahme wäre es sinnvoller, location.search in Ihren Ansichtskomponenten zu analysieren, die ein Abfrageobjekt erwarten.

Sie können dies generisch tun, indem Sie die withRouter von react-router like überschreiben

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)
6
Shubham Khatri

Es fiel mir schwer, dieses Problem zu lösen. Wenn keine der oben genannten Aufgaben funktioniert, können Sie dies stattdessen versuchen. Ich verwende die Create-React-App 

Bedarf

reag-router-dom ":" ^ 4.3.1 "

Lösung

An dem Ort, an dem der Router angegeben ist

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

Fügen Sie den Parameternamen hinzu, den Sie so übergeben möchten

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

Auf der Seite, auf der Sie/path darstellen, können Sie dies angeben, um die Aufruf-ID des Parameternamens wie folgt anzuzeigen

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

Am Ende, an dem Sie die Standardeinstellung exportieren 

export default withRouter(Component);

Denken Sie daran, den Import einzuschließen

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

Wenn Sie console.log (this.props) verwenden, können Sie das weitergeben. Habe Spaß!

5
NarDd

Wenn Sie nicht den this.props... erhalten, den Sie aufgrund der anderen Antworten erwartet haben, müssen Sie möglicherweise withRouter ( docs v4 ) verwenden:

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

this.props.params.your_param_name wird funktionieren.

Auf diese Weise können Sie die Parameter aus Ihrer Abfragezeichenfolge abrufen.
Bitte machen Sie console.log(this.props);, um alle Möglichkeiten zu erkunden.

5
nizam.sp

Vielleicht etwas zu spät, aber dieser Reaktions-Hook kann Ihnen helfen, Werte in der URL-Abfrage abzurufen/festzulegen: https://github.com/rudyhuynh/use-url-search-params (von mir geschrieben).

Es funktioniert mit oder ohne react-router. Unten finden Sie ein Codebeispiel für Ihren Fall:

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>
  )
}
2
Ruby Ybur

In der Komponente, in der Sie auf die Parameter zugreifen müssen, die Sie verwenden können

this.props.location.state.from.search

was die gesamte Abfragezeichenfolge enthüllt (alles hinter dem ?-Zeichen)

2
Rocco Ghielmini
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
    })
}
1
Anas Alpure

In React Router v4 nur mit Route ist richtiger Weg

Sie können auf die Eigenschaften des Verlaufsobjekts und die Entsprechung mit dem nächstgelegenen Objekt über die Komponente withRouter höherer Ordnung zugreifen. withRouter übergibt aktualisierte Elemente für Übereinstimmungen, Positionen und Verlauf an die umwickelte Komponente, wenn diese gerendert wird.

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

1
krystianj

Ich habe ein externes Paket namens query-string verwendet, um URL-Parameter wie folgt zu analysieren.

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}));
}
0
Joe
let data = new FormData();
data.append('file', values.file);

Sie können die Abfrage anzeigen, indem Sie Folgendes verwenden:

console.log(this.props.location.query)
0
smartworld-dm