web-dev-qa-db-de.com

Router reagieren, Daten übergeben, wenn programmgesteuert navigiert wird?

Wir könnten mit zu einem anderen Pfad navigieren

this.props.router.Push('/some/path')

Gibt es eine Möglichkeit, beim Navigieren Parameter (Objekte) mitzuschicken?

Es gibt andere Optionen, die mir in den Sinn kommen, aber ich frage mich, ob es überhaupt möglich ist, object zu übergeben.

  • Ich könnte die ID des Objekts einbetten und das Objekt vom Server von der neuen Seite abrufen.

  • Oder ich könnte das Objekt im globalen Speicher wie Redux Store speichern. (Dieses Objekt muss bald aus dem Geschäft entfernt werden. Daher denke ich, dass es möglicherweise nicht gut ist, es zuerst dort abzulegen.)

8
eugene

React Router verwendet location-Objekte. Eine der Eigenschaften eines location-Objekts ist state.

this.props.router.Push({
  pathname: '/other-page',
  state: {
    id: 7,
    color: 'green'
  }
})

Auf der Seite, zu der navigiert wird, wird die aktuelle location in die Komponente eingefügt, deren Route übereinstimmt, sodass Sie mit this.props.location.state auf den Status zugreifen können.

Dabei ist zu beachten, dass es keine state gibt, wenn ein Benutzer direkt zur Seite navigiert. Sie benötigen also einen Mechanismus, um die Daten zu laden, wenn sie nicht vorhanden sind.

36
Paul S

Wenn Sie React Router 4 oder 5 verwenden, sind die aktuellen Antworten veraltet. Rufen Sie history.Push auf und übergeben Sie ein Objekt als zweiten Parameter, um den Status zu übergeben:

props.history.Push('/other-page', { id: 7, color: 'green' }))

Dann können Sie auf die Statusdaten in '/ other-page' zugreifen über:

props.location.state

13
Cory House

Übergabe von Abfrageparametern bei der programmgesteuerten Navigation in reaktem Router

Verlaufsobjekte können programmgesteuert verwendet werden, um den aktuellen Speicherort mithilfe von history.Push und history.replace zu ändern.

    history.Push('/home?the=query', { some: 'state' })

Wenn wir das History-Objekt als Requisiten an eine Komponente übergeben. Dann können wir mit den reaktem Routermethoden, die im Verlaufsobjekt verfügbar sind, programmatisch navigieren.

Nehmen wir nun an, Sie übergeben das History-Objekt als Requisite mit dem Namen "Router". Es würde also innerhalb einer Komponente mit klassenbasierter Syntax wie folgt referenziert: 

this.props.router

Wenn Sie Push oder Replace verwenden, können Sie entweder den URL-Pfad und den Status als separate Argumente angeben oder alles als erstes Argument in ein lokales Objekt einfügen.

this.props.router.Push('/some/path?the=query')

Oder Sie können ein einzelnes standortähnliches Objekt verwenden, um sowohl die URL als auch den Status anzugeben. Dies entspricht dem obigen Beispiel.

this.props.router.Push({
  pathname: '/some/path',  //path
  search: '?the=query' // query param named 'search'
})

Note - Vergewissern Sie sich natürlich, dass der this.props.router tatsächlich das History-Objekt der React-Router-API ist.

1
therewillbecode

wenn Sie es in Abfragezeichenfolge senden möchten

this.props.router.Push({
  pathname: '/payment-history',
  query: {
    email: rowData.email
  }
})
0
Ishan

Ich konnte dies nicht mit dem Reakt-Router v4 + zum Laufen bringen. Folgendes funktioniert aber:

//I.e. add navigate using the history stack and pass context as the 2nd parameter
this.props.history.Push('/takeTest', 
    {
      subjectsList: this.props.subjectsList.filter((f)=>f.isChecked===true)
    })
0

Ich weiß nicht welche Version Sie verwenden, aber Sie können object als Parameter an react-router übergeben:

let {router} = this.props;
router.Push({pathname: "/newpath", query: {id: 1}) // will create the url /newpath?id=1
0
cubbuk