web-dev-qa-db-fra.com

React-redux obtient l'URL de base du site/window.location

J'espère que c'est une question très simple:

Je souhaite créer une chaîne contenant l'URL complète d'une page de mon site, telle que:

https://example.com/documents/1

Dans l’idéal, j’aimerais le générer dans un conteneur connect()- ed réag-redux, dans mapStateToProps(). Où la page est le petit-fils d'un react-router Route en utilisant browserHistory (alors je peux peut-être l'obtenir de react-router ou browserHistory d'une manière ou d'une autre?) Si nécessaire, je le ferais dans une classe React complète.

Mais je ne peux pas pour la vie de savoir comment faire cela. window (comme dans window.location) est toujours undefined dans mapStateToProps() (aucune grande surprise ici) et à mon avis la fonction render() des composants.

Jusqu'à présent, je n'ai trouvé que des moyens d'accéder à l'itinéraire actuel, par exemple. "/ documents/1", qui est seulement un chemin relatif et ne contient pas l'URL de base du site ( https://example.com/ )

reactjsreact-routerreact-redux
6
stone

Donc, tout d’abord, rappelez-vous que votre code s’exécute sur le client et le serveur, de sorte que tout accès à la fenêtre doit être encapsulé dans une vérification.

  if (typeof window !== 'undefined') {
    var path = location.protocol + '//' + location.Host + '/someting'; // (or whatever)
  } else {
    // work out what you want to do server-side...
  }

Si l'URL que vous générez s'affiche dans le DOM et que vous remplissez le magasin avec cette URL avant le premier rendu sur le client, vous obtiendrez une erreur de somme de contrôle. Si vous vraiment voulez éviter l'erreur, vous pouvez attendre jusqu'à componentDidMount() dans votre composant racine pour obtenir/définir l'URL.

11
David Gilbertson

Après composantDidMount, vous pouvez accéder directement à l’emplacement d’origine pour obtenir l’URL racine.

J'utilise tout le temps le code ci-dessous dans mon JSX afin de ne pas avoir à m'inquiéter du chemin racine ex: dev env ce serait localhost:3000/whatever, la mise en scène sera AppStaging.heroku/whatever/..... et en production, elle serait évaluée à www.myapp.com/whatever

`${window.location.Origin.toString()}/whateverRoute/`
0
Denis S Dujota