Wie übergebe ich Parameter mit history.push / Link / Redirect in React-Router v4?

Wie können wir Parameter this.props.history.push('/page')in React-Router v4 übergeben?

.then(response => {
       var r = this;
        if (response.status >= 200 && response.status < 300) {
             r.props.history.push('/template');
          });

Zunächst müssen Sie dies nicht tun, var r = this;da sich dies if statementauf den Kontext des Rückrufs selbst bezieht, der sich, da Sie die Pfeilfunktion verwenden, auf den Kontext der React-Komponente bezieht.

Laut den Dokumenten:

Verlaufsobjekte haben normalerweise die folgenden Eigenschaften und Methoden:

• Länge - (Anzahl) Die Anzahl der Einträge im Verlaufsstapel
• Aktion - (Zeichenfolge) Die aktuelle Aktion (PUSH, REPLACE oder POP)

• Ort - (Objekt) Der aktuelle Ort. Kann die folgenden Eigenschaften haben:

  • Pfadname - (Zeichenfolge) Der Pfad der URL
  • search - (string) Die URL-Abfragezeichenfolge
  • hash - (string) Das URL-Hash-Fragment
  • state - (Zeichenfolge) ortsspezifischer Status, der bereitgestellt wurde, um beispielsweise Push (Pfad, Status) zu übertragen, als dieser Speicherort auf den Stapel verschoben wurde. Nur im Browser- und Speicherverlauf verfügbar.
• push (Pfad, [Status]) - (Funktion) Schiebt einen neuen Eintrag in den Verlaufsstapel
• replace (Pfad, [Status]) - (Funktion) Ersetzt den aktuellen Eintrag im Verlaufsstapel
• go (n) - (Funktion) Verschiebt den Zeiger im Verlaufsstapel um n Einträge
• goBack () - (Funktion) Entspricht go (-1)
• goForward () - (Funktion) Entspricht go (1)
• block (Eingabeaufforderung) - (Funktion) Verhindert die Navigation

Während der Navigation können Sie Requisiten wie an das Verlaufsobjekt übergeben

this.props.history.push({
  pathname: '/template',
  search: '?query=abc',
  state: { detail: response.data }
})

oder ähnlich für die LinkKomponente oder die RedirectKomponente

<Link to={{
      pathname: '/template',
      search: '?query=abc',
      state: { detail: response.data }
    }}> My Link </Link>

und dann können Sie in der Komponente, die mit /templateroute gerendert wird , auf die Requisiten zugreifen, die wie übergeben wurden

this.props.location.state.detail

Beachten Sie auch, dass Sie die Komponente verbinden müssen, wenn Sie Verlaufs- oder Standortobjekte von Requisiten verwenden withRouter.

Gemäß den Dokumenten:

withRouter

<Route>'sÜber die withRouterKomponente höherer Ordnung können Sie auf die Eigenschaften des Verlaufsobjekts und die engste Übereinstimmung zugreifen . withRouter Die Komponente wird jedes Mal neu gerendert, wenn sich die Route mit denselben Requisiten wie beim <Route>Rendern ändert props: { match, location, history }.

Sie können verwenden,

this.props.history.push("/template", { ...response }) oder this.props.history.push("/template", { response: response })

Anschließend können Sie von der /templateKomponente aus auf die analysierten Daten zugreifen, indem Sie den folgenden Code verwenden:

const state = this.props.location.state

Weitere Informationen zum React Session History Management

• Für die früheren Versionen:

  history.push('/path', yourData);

  Und erhalten Sie die Daten in der zugehörigen Komponente wie folgt:

  this.props.location.state // it is equal to yourData

• Für die neueren Versionen funktioniert der obige Weg gut, aber es gibt einen neuen Weg:

  history.push({
    pathname: '/path',
    customNameData: yourData,
  });

  Und erhalten Sie die Daten in der zugehörigen Komponente wie folgt:

  this.props.location.customNameData // it is equal to yourData

Hinweis : Der stateSchlüsselname wurde in früheren Versionen verwendet. In neueren Versionen können Sie Ihren benutzerdefinierten Namen zum Übergeben von Daten verwenden. Die Verwendung des stateNamens ist nicht unbedingt erforderlich.

Erweiterung der Lösung (von Shubham Khatri vorgeschlagen) zur Verwendung mit React-Haken (ab 16.8):

package.json (always worth updating to latest packages)

{
     ...

     "react": "^16.12.0",
     "react-router-dom": "^5.1.2",

     ...
}

Übergeben von Parametern mit Verlaufs-Push:

import { useHistory } from "react-router-dom";

const FirstPage = props => {
    let history = useHistory();

    const someEventHandler = event => {
       history.push({
           pathname: '/secondpage',
           search: '?query=abc',
           state: { detail: 'some_value' }
       });
    };

};

export default FirstPage;

Zugriff auf den übergebenen Parameter mit useLocation von 'react-router-dom':

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

const SecondPage = props => {
    const location = useLocation();

    useEffect(() => {
       console.log(location.pathname); // result: '/secondpage'
       console.log(location.search); // result: '?query=abc'
       console.log(location.state.detail); // result: 'some_value'
    }, [location]);

};

Wenn Sie URL-Parameter übergeben müssen

Es gibt eine großartige Erklärung des Beitrags von Tyler McGinnis auf seiner Website, Link zum Beitrag

Hier sind Codebeispiele:

1. auf der history.push-Komponente:

   this.props.history.push(`/home:${this.state.userID}`)

2. Auf der Routerkomponente definieren Sie die Route:

   <Route path='/home:myKey' component={Home} />

3. auf der Home-Komponente:

componentDidMount(){
    const { myKey } = this.props.match.params
    console.log(myKey )
}

Es ist nicht erforderlich, withRouter zu verwenden. Das funktioniert bei mir:

Auf Ihrer übergeordneten Seite

<BrowserRouter>
   <Switch>
        <Route path="/routeA" render={(props)=> (
          <ComponentA {...props} propDummy={50} />
        )} />

        <Route path="/routeB" render={(props)=> (
          <ComponentB {...props} propWhatever={100} />
          )} /> 
      </Switch>
</BrowserRouter>

Dann können Sie in ComponentA oder ComponentB darauf zugreifen

this.props.history

Objekt, einschließlich der Methode this.props.history.push.

Um React 16.8+ (withHooks) zu verwenden , können Sie diesen Weg verwenden

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

export default function SomeFunctionalComponent() {
let history = useHistory(); // should be called inside react component

const handleClickButton = () => {    
"funcionAPICALL"
       .then(response => {
             if (response.status >= 200 && response.status < 300) {
                 history.push('/template');
              });
}

return ( <div> Some component stuff 
    <p>To make API POST request and redirect to "/template" click a button API CALL</p>
    <button onClick={handleClickButton}>API CALL<button>
</div>)
} 

Quelle hier, um mehr zu lesen https://reacttraining.com/react-router/web/example/auth-workflow

Fügen Sie Informationen hinzu, um Abfrageparameter abzurufen.

const queryParams = new URLSearchParams(this.props.location.search);
console.log('assuming query param is id', queryParams.get('id');

Weitere Informationen zu URLSearchParams finden Sie unter diesem Link URLSearchParams