Obtenir l'URL actuelle dans React

1. Obtenir l’URL actuelle dans React - Vanilla JavaScript Solution
2. Obtenir l’URL courante via React Router
3. Obtenir l’URL actuelle React Router Hooks

Lors du développement d’applications à page unique dans React, le routage est la pièce maîtresse du puzzle. Sur chaque URL, il peut y avoir des composants ou d’autres visuels qui doivent être affichés.

Lors de la création d’une application React, les développeurs doivent souvent effectuer diverses actions en fonction de l’URL actuelle. Les développeurs peuvent utiliser plusieurs interfaces différentes pour accéder à l’URL actuelle.

Obtenir l’URL actuelle dans React - Vanilla JavaScript Solution

Étant donné que React est basé sur du JavaScript normal, vous pouvez accéder à la propriété location sur l’interface window. Pour obtenir le chemin complet de l’URL actuelle, vous pouvez utiliser window.location.href, et pour obtenir le chemin sans le domaine racine, accédez à la place à window.location.pathname.

Regardons l’exemple :

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

Si vous rendez le composant App sur playcode.io, la console affichera l’URL complète de votre projet. Dans ce cas, ce serait https://playcode.io/837468/. Si vous console.log(window.location.pathname) à la place, la sortie de la console sera /837468/. Suivez ce lien pour jouer avec le code vous-même.

La lecture de window.location est une bonne solution simple pour obtenir l’URL actuelle. Cependant, il s’appuie sur l’interface générale window.location.

Si vous recherchez une solution spécifique à React, continuez à lire.

Obtenir l’URL courante via React Router

React fournit history-package et un objet location séparé via props. Il s’agit essentiellement du même objet location disponible sur l’interface window, mais il est personnalisé pour React.

Cet objet représente l’URL actuelle de l’application. Le moyen le plus simple d’y accéder est de lire l’objet location du props.

Cependant, pour fournir location via les props, vous devez installer React Router, et le composant enfant doit être connecté au composant Route. Par exemple:

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

Dans cet exemple, le composant App aura accès à l’objet location via des props. À l’intérieur de ce composant, nous pouvons lire this.props.location.pathname, qui renverra une URL de chemin qui n’inclut pas le domaine racine.

Les composants enfants rendus avec un composant <Route> ont également accès à la prop location. Voici un exemple :

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

Dans ce cas, le composant App conservera toujours l’accès à la prop location.

Si this.props.location renvoie undefined, votre composant React est très probablement rendu en dehors du composant personnalisé <Route>. Dans ce cas, vous pouvez importer un composant d’ordre élevé (HOC) withRouter et l’utiliser pour accéder aux props location et history.

withRouter peut être importé depuis le package react-router-dom. Voici un exemple :

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

export default withRouter(App)

Envelopper le composant d’exportation par défaut App dans un HOC withRouter vous permettra d’accéder à des props qui ne seraient autrement disponibles que pour les composants rendus avec un composant spécial <Route>.

Obtenir l’URL actuelle React Router Hooks

Les composants fonctionnels vous permettent d’utiliser des crochets. Dans notre situation, useLocation() est un excellent hook qui permet d’accéder facilement à l’objet location.

Il peut être importé depuis le package react-router-dom. Cet exemple utilise le hook useLocation() pour obtenir un objet location et le stocker dans une variable.

Regardons:

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

Une fois que vous avez stocké l’objet location dans une variable, vous pouvez accéder au chemin (URL sans le domaine racine) en accédant à sampleLocation.pathname.

Vous pouvez également accéder à la propriété location de l’objet history.

Le hook useHistory permet d’y accéder. Cependant, en raison de problèmes de mutabilité, les [docs officiels react-router recommandent de s’en tenir à l’objet location.