Reagieren - So erhalten Sie den Parameterwert aus der Abfragezeichenfolge

Wie kann ich eine Route in meiner Datei route.jsx definieren, um den __firebase_request_keyParameterwert von einer URL zu erfassen, die vom Single Sign-On-Prozess von Twitter nach der Umleitung von den Servern generiert wurde?

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

Ich habe es mit der folgenden :redirectParamRoutenkonfiguration versucht, aber die fängt den genannten Parameter nicht ab:

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

Reagiere auf Router v3

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

this.props.location.query.__firebase_request_key

Wenn Sie nach den Pfadparameterwerten suchen, die im Router durch einen Doppelpunkt (:) getrennt sind, können Sie über diese zugreifen

this.props.match.params.redirectParam

Dies gilt für späte React Router v3-Versionen (nicht sicher, welche). Es wurde berichtet, dass ältere Router-Versionen verwendet werden this.props.params.redirectParam.

React Router v4 und React Router v5, allgemein

React Router v4 analysiert die Abfrage nicht mehr für Sie, sondern kann nur über darauf zugreifen this.props.location.search. Aus Gründen siehe die Antwort von nbeuchat .

ZB mit importierter qs- Bibliothek, wie qsSie es tun könnten

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

Eine andere Bibliothek wäre eine Abfragezeichenfolge . In dieser Antwort finden Sie weitere Ideen zum Parsen der Suchzeichenfolge. Wenn Sie keine IE-Kompatibilität benötigen , können Sie diese auch verwenden

new URLSearchParams(this.props.location.search).get("__firebase_request_key")

Für Funktionskomponenten würden Sie durch this.props.locationden Hook useLocation ersetzen . Beachten Sie, dass Sie verwenden window.location.searchkönnen, dies ermöglicht jedoch nicht das Auslösen des React-Renderings bei Änderungen. Wenn Ihre (nicht funktionsfähige) Komponente kein direktes untergeordnetes Element von a ist Switch, müssen Sie withRouter verwenden, um auf die vom Router bereitgestellten Requisiten zuzugreifen.

Allgemeines

Vorschlag von nizam.sp zu tun

console.log(this.props)

wird auf jeden Fall hilfreich sein.

Reagiere auf Router v4

Verwenden von component

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

this.props.match.params.id

Die Komponente wird automatisch mit den Routenrequisiten gerendert.

Verwenden von render

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

this.props.match.params.id

Routenrequisiten werden an die Renderfunktion übergeben.

Reagiere auf Router v3

Mit React Router v3 können Sie this.props.location.searchAbfragezeichenfolgen von (? Qs1 = naisarg & qs2 = parmar) abrufen. Zum Beispiel mit let params = queryString.parse(this.props.location.search)würde geben{ qs1 : 'naisarg', qs2 : 'parmar'}

Reagiere auf Router v4

Mit React Router v4 existiert das this.props.location.querynicht mehr. Sie müssen this.props.location.searchstattdessen die Abfrageparameter entweder selbst oder mithilfe eines vorhandenen Pakets wie z query-string.

Beispiel

Hier ist ein minimales Beispiel für die Verwendung von React Router v4 und der query-stringBibliothek.

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 die queryEigenschaft rational entfernt, lautet:

Es gibt eine Reihe gängiger Pakete, die das Parsen / Stringifizieren von Abfragezeichenfolgen etwas anders durchführen, und jeder dieser Unterschiede kann für einige Benutzer die "richtige" und für andere die "falsche" Methode sein. Wenn React Router den "richtigen" auswählen würde, wäre dies nur für einige Leute richtig. Dann müsste es eine Möglichkeit für andere Benutzer geben, in ihrem bevorzugten Abfrage-Parsing-Paket zu ersetzen. Es gibt keine interne Verwendung der Suchzeichenfolge durch React Router, die das Parsen der Schlüssel-Wert-Paare erfordert, sodass nicht ausgewählt werden muss, welche davon "richtig" sein soll.

[...]

Der Ansatz für 4.0 besteht darin, alle Funktionen der "Batterien enthalten" zu entfernen und zum einfachen Routing zurückzukehren. Wenn Sie das Parsen von Abfragezeichenfolgen oder das asynchrone Laden oder die Redux-Integration oder etwas anderes sehr Spezifisches benötigen, können Sie dies mit einer Bibliothek speziell für Ihren Anwendungsfall hinzufügen. Es ist weniger Cruft verpackt, das Sie nicht benötigen, und Sie können die Dinge an Ihre spezifischen Vorlieben und Bedürfnisse anpassen.

Die vollständige Diskussion finden Sie auf GitHub .

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 die Browser-API verwenden. Bild 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 namens 'query-string'. Installieren Sie es zuerst

npm i query-string

Importieren Sie es dann in die aktuelle Javascript-Datei:

 import queryString from 'query-string'

Der nächste Schritt besteht darin, 'Token' in der aktuellen URL abzurufen. Gehen Sie wie folgt 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

4. wenn die aktuelle URL wie folgt 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

React Router v4 hat das props.location.query Objekt nicht mehr (siehe Github- Diskussion). Die akzeptierte Antwort funktioniert also nicht für neuere Projekte.

Eine Lösung für v4 ist eine externe Bibliothek verwenden Abfrage-String die analysierenprops.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'}

Bei Verwendung von React-Hooks besteht kein Zugriff auf this.props.location. Verwenden Sie windowObjekt, um URL-Parameter zu erfassen .

const search = window.location.search;
const params = new URLSearchParams(search);
const foo = params.get('bar');

Reagiere auf 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

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

this.props.params.userId

Reagiere auf Router 5.1+

5.1 führte verschiedene Haken ein useLocationund useParamsdas könnte hier von Nutzen sein.

Beispiel:

<Route path="/test/:slug" component={Dashboard} />

Dann wenn wir besucht sagen

http://localhost:3000/test/signin?_k=v9ifuf&__firebase_request_key=blablabla

Sie könnten es wie abrufen

import { useLocation } from 'react-router';
import queryString from 'query-string';

const Dashboard: React.FC = React.memo((props) => {
    const location = useLocation();

    console.log(queryString.parse(location.search));

    // {__firebase_request_key: "blablabla", _k: "v9ifuf"}

    ...

    return <p>Example</p>;
}

Wenn Ihr Router so ist

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

Sie werden diese ID so bekommen

this.props.match.params.id

Mit diesem Einzeiler können Sie ihn überall in React Hook und React Class Component mit einfachem JavaScript verwenden.

https://www.hunterisgod.com/?city=Leipzig

let city = (new URLSearchParams(window.location.search)).get("city")

Wenn Sie nicht die this.props... erhalten, die Sie aufgrund der anderen Antworten erwartet haben, müssen Sie möglicherweise Folgendes verwenden 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))

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

Bedarf

React-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 wie folgt übergeben möchten

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

Auf der Seite, auf der Sie einige / path rendern, können Sie dies angeben, um die Aufrufnummer des Parameternamens wie folgt anzuzeigen

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

Am Ende, wo Sie Standard exportieren

export default withRouter(Component);

Denken Sie daran, den Import einzuschließen

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

Bei console.log (this.props) können Sie, was weitergegeben wurde. Habe Spaß!

React routerab v4 gibt man das nicht mehr query paramsdirekt in seinem locationobjekt. Der Grund dafür ist

Es gibt eine Reihe gängiger Pakete, die das Parsen / Stringifizieren von Abfragezeichenfolgen etwas anders ausführen, und jeder dieser Unterschiede kann für einige Benutzer die "richtige" und für andere die "falsche" Methode sein. Wenn React Router den "richtigen" auswählen würde, wäre dies nur für einige Leute richtig. Dann müsste es eine Möglichkeit für andere Benutzer geben, in ihrem bevorzugten Abfrage-Parsing-Paket zu ersetzen. Es gibt keine interne Verwendung der Suchzeichenfolge durch React Router, die das Parsen der Schlüssel-Wert-Paare erfordert, sodass nicht ausgewählt werden muss, welche davon "richtig" sein soll.

Wenn Sie dies aufgenommen haben, ist es nur sinnvoller, location.search in Ihren Ansichtskomponenten zu analysieren, die ein Abfrageobjekt erwarten.

Sie können dies generisch tun, indem Sie das withRouterfrom überschreibenreact-router like

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)

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

Vielleicht etwas spät, aber dieser Reaktions-Hook kann Ihnen helfen, Werte in der URL-Abfrage abzurufen / festzulegen: abzurufen 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>
  )
}

this.props.params.your_param_name wird funktionieren.

Auf diese Weise erhalten Sie die Parameter aus Ihrer Abfragezeichenfolge.
Bitte tun Sie dies console.log(this.props);, um alle Möglichkeiten zu erkunden.

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

this.props.location.state.from.search

Dadurch wird die gesamte Abfragezeichenfolge angezeigt (alles nach dem ?Zeichen).

Angenommen, es gibt eine URL wie folgt

http: // localhost: 3000 / callback? code = 6c3c9b39-de2f-3bf4-a542-3e77a64d3341

Wenn wir den Code aus dieser URL extrahieren möchten, funktioniert die folgende Methode.

const authResult = new URLSearchParams(window.location.search); 
const code = authResult.get('code')

In React Router v4 ist nur withRoute richtig

Sie können über die withRouter-Komponente höherer Ordnung auf die Eigenschaften des Verlaufsobjekts und die Übereinstimmung des nächsten zugreifen. withRouter übergibt aktualisierte Übereinstimmungs-, Speicherort- und Verlaufs-Requisiten beim Rendern an die umschlossene Komponente.

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

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

Wenn Sie mit React Route Dom arbeiten, wird das Objekt für die Übereinstimmung leer. Wenn Sie jedoch den folgenden Code ausführen, gilt dies sowohl für die es6-Komponente als auch direkt für die Funktionskomponente

import { Switch, Route, Link } from "react-router-dom";

<Route path="/profile" exact component={SelectProfile} />
<Route
  path="/profile/:profileId"
  render={props => {
    return <Profile {...props} loading={this.state.loading} />;
  }}
/>
</Switch>
</div>

Auf diese Weise können Sie Requisiten erhalten und Parameter und Profil-IDs abgleichen

Dies funktionierte für mich nach vielen Recherchen zur es6-Komponente.

Oder vielleicht so etwas?

let win = {
  'location': {
    'path': 'http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla'
  }
}
if (win.location.path.match('__firebase_request_key').length) {
  let key = win.location.path.split('__firebase_request_key=')[1]
  console.log(key)
}

Sie können einen einfachen Hook zum Extrahieren von Suchparametern aus dem aktuellen Speicherort erstellen:

import React from 'react';
import { useLocation } from 'react-router-dom';

export function useSearchParams<ParamNames extends string[]>(...parameterNames: ParamNames): Record<ParamNames[number], string | null> {
    const { search } = useLocation();
    return React.useMemo(() => { // recalculate only when 'search' or arguments changed
        const searchParams = new URLSearchParams(search);
        return parameterNames.reduce((accumulator, parameterName: ParamNames[number]) => {
            accumulator[ parameterName ] = searchParams.get(parameterName);
            return accumulator;
        }, {} as Record<ParamNames[number], string | null>);
    }, [ search, parameterNames.join(',') ]); // join for sake of reducing array of strings to simple, comparable string
}

dann könnten Sie es in Ihrer Funktionskomponente wie folgt verwenden:

// current url: http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla
const { __firebase_request_key } = useSearchParams('__firebase_request_key');

// current url: http://localhost:3000/home?b=value
const searchParams = useSearchParameters('a', 'b'); // {a: null, b: 'value'}

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

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

einfachste Lösung!

im Routing:

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

im Reaktionscode:

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