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

216

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');
          });
IshanGarg
quelle
Die Komponente, die durch eine gemacht wird Routesollte Zugang haben this.props.location, this.props.historyusw. Ich glaube , Sie nicht verwenden müssen refmehr mit v4. Versuchen Sie esthis.props.history.push('/template');
saadq
Es ist nicht ref, es ist variabel, dass darauf hingewiesen wird; this.props.history.push ('/ template'); Bring mich zur nächsten Seite, aber ich möchte Requisiten mit ihnen weitergeben .ref = this;
IshanGarg
Sie versuchen, propsan die Komponente zu übergeben , die der Route entspricht? Ich denke, dieser GitHub-Thread spricht Ihr Anliegen an.
Saadq
JFYI - Ich habe <a href> entfernt und <Link> hinzugefügt, das auch die Option zum Senden des Status bietet, auf den die nächste Seite über this.props.location.state zugreifen kann.
Manohar Reddy Poreddy
Könnten Sie bitte eine der Antworten als "Antwort" markieren. Ich bin sicher, die Leute, die Zeit damit verbringen, sie zu tippen, werden es zu schätzen wissen.
James Poulose

Antworten:

391

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

Shubham Khatri
quelle
3
Ja, das hat funktioniert. Danke! Aber nicht sicher, warum this.props.history.push('/template',response.data)nicht arbeiten. Glauben push(path, [state])Sie nicht, dass es laut Docs of funktionieren sollte?
Sanket Patel
1
Danke dafür! In meinem Fall habe ich nur die Geschichte direkt weitergegeben, also habe ich über this.props.history.location.state.propName -
Nunchucks am
@SanketPatel Sie müssen dies tun this.props.history.push ('/ template', {response: response.data})
Arsalan Ahmed Quershi
Ist es möglich, die Route in einer neuen Registerkarte zu öffnen, während beim Navigieren Daten in der Statusvariablen übergeben werden. Sie können Requisiten an das Verlaufsobjekt übergeben?
Gaurav Kumar
3
was ist mit goBack ()? Wenn ich mit goBack () zurück navigiere, kann ich weder in props.location noch in props.history.location einen der Verlaufszustände sehen. Mit push () vorwärts
navigieren
40

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

Tenusha Guruge
quelle
Diese Logik hat bei mir funktioniert, während history.push mit back_url im Status this.props.history.push (redirect_url, {back_url: '/ needing_url'}); und dies auf der Landing Page von this.props.location.state.back_url
Braham Dev Yadav
24
  • 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.

AmerllicA
quelle
Bitte teilen Sie die Referenz mit, die besagt, dass der Zustand nicht unbedingt
erforderlich
Lieber @AkshayVijayJain, es ist meine Erfahrung mit dem Codieren. Ich habe diesen Satz nicht basierend auf einem Dokument oder einer Referenz geschrieben.
AmerllicA
19

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

};
Akhouri
quelle
Vielen Dank, ich konnte keine aktualisierte Alternative außer Ihrer Antwort finden!
Jameszrin
10

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 )
}
Shyke
quelle
Ich habe so etwas, aber wenn ich die Seite
aktualisiere,
@rabiaasif Da die Daten nicht mehr vorhanden sind, müssen Sie sie beibehalten oder im lokalen Speicher speichern
Drew Cordano
3

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.

joedotnot
quelle
Ich denke, Sie haben es nicht gebraucht, withRouterweil Sie Ihre Komponente damit umwickelt haben BrowserRouter, was genauso funktioniert.
Pie 'Oh' Pah
Ja, und Sie geben das propsDown in jede Komponente weiter, die die historyRequisite enthält.
Jeremy
2

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

P Mill
quelle
-12

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

Kamal Pandey
quelle
1
Dies ist überhaupt nicht relevant für React Router 4.
Colby Cox