Aktuelle URL abrufen in React

1. Aktuelle URL in React abrufen - Vanille-JavaScript-Lösung
2. Aktuelle URL über React Router abrufen
3. Aktuelle URL abrufen React Router Hooks

Bei der Entwicklung von Single Page Applications in React ist das Routing das Schlüsselstück des Puzzles. Auf jeder URL können Komponenten oder andere visuelle Elemente angezeigt werden.

Beim Erstellen einer React-App müssen Entwickler oft verschiedene Aktionen basierend auf der aktuellen URL ausführen. Entwickler können mehrere verschiedene Schnittstellen verwenden, um auf die aktuelle URL zuzugreifen.

Aktuelle URL in React abrufen - Vanille-JavaScript-Lösung

Da React auf regulärem JavaScript basiert, können Sie auf die location-Eigenschaft auf der window-Oberfläche zugreifen. Um den vollständigen Pfad der aktuellen URL zu erhalten, können Sie window.location.href verwenden, und um den Pfad ohne die Root-Domain abzurufen, greifen Sie stattdessen auf window.location.pathname zu.

Schauen wir uns das Beispiel an:

class App extends Component {
  render() {
    console.log(window.location.href);
    return <h1>Hi! Try edit me</h1>;
  }
}

Wenn Sie die Komponente App auf playcode.io rendern, zeigt die Konsole die vollständige URL zu Ihrem Projekt an. In diesem Fall wäre das https://playcode.io/837468/. Wenn Sie stattdessen console.log(window.location.pathname) verwenden, lautet die Konsolenausgabe /837468/. Folgen Sie diesem Link, um selbst mit dem Code herumzuspielen.

Das Lesen von window.location ist eine gute und einfache Lösung, um die aktuelle URL zu erhalten. Es stützt sich jedoch auf die allgemeine Schnittstelle window.location.

Wenn Sie nach einer React-spezifischen Lösung suchen, lesen Sie weiter.

Aktuelle URL über React Router abrufen

React bietet ein history Paket und ein separates location-Objekt über props. Es ist im Wesentlichen das gleiche location-Objekt, das auf der window-Oberfläche verfügbar ist, aber es ist für React angepasst.

Dieses Objekt stellt die aktuelle URL der App dar. Der einfachste Weg, darauf zuzugreifen, besteht darin, das Objekt location der props zu lesen.

Um jedoch location über Props bereitzustellen, müssen Sie React Router installieren und die untergeordnete Komponente muss mit der Komponente Route verbunden sein. Zum Beispiel:

<Route path="/" component={App}></Route>

In diesem Beispiel hat die App-Komponente über props Zugriff auf das Objekt location. In dieser Komponente können wir this.props.location.pathname lesen, was eine Pfad-URL zurückgibt, die die Root-Domain nicht enthält.

Untergeordnete Komponenten, die mit einer <Route>-Komponente gerendert werden, haben auch Zugriff auf die location-props. Hier ist ein Beispiel:

<Route path="/" render={() => <App></App>} />

In diesem Fall behält die App-Komponente weiterhin den Zugriff auf die location prop.

Wenn this.props.location undefined zurückgibt, wird Ihre React-Komponente höchstwahrscheinlich außerhalb der benutzerdefinierten <Route>-Komponente gerendert. In diesem Fall können Sie High-Order-Component (HOC) withRouter importieren und damit auf location- und history-props zugreifen.

withRouter kann aus dem react-router-dom-Paket importiert werden. Hier ist ein Beispiel:

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
class App extends Component {
      render(){...}
}

export default withRouter(App)

Wenn Sie die Standardexportkomponente App in ein HOC withRouter einschließen, können Sie auf props zugreifen, die sonst nur für Komponenten verfügbar wären, die mit einer speziellen <Route>-Komponente gerendert werden.

Aktuelle URL abrufen React Router Hooks

Funktionskomponenten ermöglichen die Verwendung von Haken. In unserer Situation ist useLocation() ein hervorragender Hook, der einen einfachen Zugang zum location-Objekt bietet.

Es kann aus dem Paket react-router-dom importiert werden. Dieses Beispiel verwendet den Hook useLocation(), um ein location-Objekt abzurufen und in einer Variablen zu speichern.

Werfen wir einen Blick:

import { useLocation } from "react-router-dom"
const sampleLocation = useLocation();

Nachdem Sie das Objekt location in einer Variablen gespeichert haben, können Sie auf den Pfad (URL ohne Root-Domain) zugreifen, indem Sie auf sampleLocation.pathname zugreifen.

Sie können auch auf die Eigenschaft location des Objekts history zugreifen.

Mit dem Hook useHistory können Sie darauf zugreifen. Aufgrund von Bedenken hinsichtlich der Veränderlichkeit empfehlen die offiziellen react-router-Dokumente jedoch, beim location-Objekt zu bleiben.