Verwendung von Redirect im React Router

1. React Router Redirect in Funktionskomponenten
2. React Router Redirect in Klassenkomponenten

Wenn Sie ein Entwickler sind, der an komplexen Webanwendungen arbeitet, wissen Sie wahrscheinlich, wie wichtig Routing ist. Routen sind eines der Schlüsselelemente des Navigationssystems der App. Die Entwickler von ReactJ verwenden in der Regel das Paket react-router-dom, um Routen für Anwendungen zu erstellen.

Nach dem Absenden eines Formulars (oder einer anderen Benutzeraktion) muss die Anwendung manchmal zu einer anderen URL navigieren. In diesem Artikel sehen wir uns an, wie Weiterleitungen in React behandelt werden.

React Router Redirect in Funktionskomponenten

Hooks können die Grundfunktionalität von Funktionskomponenten erweitern. React-Entwickler können eingebaute Hooks wie useReducer(), useState(), useEffect() verwenden oder ihre eigenen angepassten Versionen erstellen.

useHistory() Hook

Die useHistory() gibt eine history-Instanz zurück, die den aktuellen Standort (URL) der Komponente enthält. Der Umgang mit Weiterleitungen ist kein primärer Zweck dieses Hooks. In neuen Versionen von React Router (5 und höher) können Sie diesen Hook jedoch verwenden, um den Benutzer auf effiziente und lesbare Weise umzuleiten.

Schauen wir uns das Beispiel an:

import { useHistory } from "react-router-dom"
function SampleComponent() {
  let history = useHistory()
  function handleClick() {
    history.push("/somepage")
  }

  return (
    <span onClick={() => handleClick()}>
      Go home
    </span>
  )
}

In diesem Beispiel importieren wir den Hook useHistory aus dem Paket react-router-dom. Dann definieren wir eine einfache funktionale Komponente, die ein einzelnes <span>-Element mit einem Event-Handler für das click-Ereignis zurückgibt.

Wir erstellen auch eine Variable history, um die vom Hook useHistory() zurückgegebene Instanz zu speichern.

Im Rumpf der Event-Handler-Funktion verwenden wir eine Methode .push() und übergeben einen String als Argument. Das Argument für diese Methode wird am Ende der aktuellen URL hinzugefügt. Wenn also unsere Anwendung auf dem Port localhost:3000 lief und wir ein click-Ereignis verarbeiten müssten, würde sich unsere URL in localhost:3000/somepage ändern.

React Router Redirect in Klassenkomponenten

Eine andere Möglichkeit, nach dem Ausführen einer Aktion (Einreichen eines Formulars, Klicken auf eine Schaltfläche oder eine andere Benutzeraktion) zu einer anderen URL zu navigieren, besteht darin, die benutzerdefinierte Komponente <Redirect> zu verwenden. Sie können es aus der Bibliothek "react-router-dom" importieren.

Sie können steuern, wann die Umleitung stattfindet, indem Sie sie bedingt basierend auf dem Zustandswert rendern. Schauen wir uns dieses Beispiel an:

import React from "react"
import { Redirect } from "react-router-dom"

class MyComponent extends React.Component {
  constructor(props){
     super(props)
     this.state = {
    	    condition: false
  		}
  }
  handleClick () {
    axios.post(/*URL*/)
      .then(() => this.setState({ condition: true }));
  }

  render () {
    const { condition } = this.state;

     if (condition) {
       return <Redirect to='/somePage'/>;
     }
     return <button onClick={() => this.handleClick()}>Redirect</button>;
}

Unser Zustand hat eine condition-Eigenschaft, die auf false gesetzt ist. Aufgrund dieses booleschen Werts wird die Komponente <Redirect> nicht gerendert und die URL des Benutzers ändert sich nicht.

Durch Klicken auf die einzelne Schaltfläche können Benutzer einen Ereignishandler auslösen, der die Eigenschaft condition auf true setzt. In diesem Fall werden die Kriterien für die if-Anweisung erfüllt und die Render-Funktion gibt die Komponente <Redirect> zurück, die Benutzer zum angegebenen relativen Pfad führt.

Wenn unsere Anwendung in diesem Fall eine Homepage unter localhost:3000 hat und unsere Komponente <Redirect> ein to-Attribut mit dem Wert '/somePage' hat, werden die Benutzer auf folgendes umgeleitet Ort: localhost:3000/somePage.

this.props.history.push("")

Die Verwendung des Hooks useHistory() ist nicht die einzige Möglichkeit, auf den aktuellen Standort des Benutzers zuzugreifen. Entwickler können bei beiden Komponententypen dasselbe erreichen, indem sie die Eigenschaft history des Objekts props lesen.

Wenn die Umleitung nach dem Klicken auf eine Schaltfläche erfolgen soll, müssen Sie einen onClick-Ereignishandler einrichten, der die Methode .push("") verwendet, um einen relativen Pfad zu dem Ort bereitzustellen, an den der Benutzer umgeleitet werden soll. Hier ist ein Beispiel:

<button onClick={this.props.history.push('/somePage')}>Redirect to some page </button>

Wenn sich ihr aktueller Standort auf der Startseite von localhost:3000 befindet, führt ein Klick auf diese Schaltfläche Benutzer zur URL localhost:3000/somePage.