Réagir-redux obtenir l'URL de base du site / de la fenêtre.emplacement

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

Je veux créer une chaîne de caractères contenant l'URL complète vers une page sur mon site, comme:

https://example.com/documents/1

Idéalement, je voudrais générer une réaction redux connect()-ed conteneur, dans mapStateToProps(). Lorsque la page est un petit-enfant d'une réaction-routeur Route à l'aide de browserHistory (donc peut-être que je peux obtenir à partir de réagir-routeur ou browserHistory en quelque sorte?) Si nécessaire, je le ferais dans une Réagir la classe.

Mais je ne peux pas pour la vie de me trouver comment faire cela. window (comme dans window.location) est toujours undefined dans mapStateToProps() (sans grande surprise), et de mon point de vue des composants render() fonction.

Pour l'instant j'ai seulement trouvé des moyens pour accéder à l'itinéraire actuel, par exemple "/documents/1", qui n'est qu'un chemin relatif et ne contient pas le site à l'url de base (https://example.com/)

Avez-vous besoin pour créer cette forte sur le serveur, ou tout simplement le client?
Juste sur le côté client.

OriginalL'auteur stone | 2016-07-20

  1. 12

    Donc, tout d'abord, n'oubliez pas votre code s'exécute sur le client et le serveur, donc aucun accès à la fenêtre doit être enveloppé dans une case. 

      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érer des spectacles dans les DOM, et sur le client vous peupler le magasin avec cette URL avant le premier rendu, vous allez obtenir une erreur de somme de contrôle. Si vous vraiment voulez éviter l'erreur, vous pouvez attendre jusqu'à ce que componentDidMount() dans la racine de votre composante pour obtenir/définir l'url.

    Merci, lecture window.location dans componentDidMount travaillé. - Je le faire à partir du composant de niveau supérieur dans l'application et l'enregistrer dans l'état. Puis-je demander à un) pourquoi vous suggère de faire ça côté serveur - serait-ce donc que le rendu côté serveur peut également fonctionner? et b) comment/où vous suggérons de conserver l'url à partir du côté serveur, tels que le code client peut le lire?
    maintenant que j'y ai pensé, oui il n'y a aucune bonne raison pour aller sur le serveur, j'ai donc supprimé ce commentaire de ma réponse.
    Exactement ce que je cherchais

    OriginalL'auteur David Gilbertson

  2. 1

    Après componentDidMount vous pouvez accéder directement à l'origine de l'emplacement de sorte que vous pouvez obtenir l'url de la racine.

    J'utilise le code ci-dessous dans mon JSX tout le temps alors que je n'ai pas à vous soucier du chemin de la racine ex: dev env ce serait localhost:3000/whatever, la mise en scène, ce sera AppStaging.heroku/whatever/..... et en production, il devrait correspondre à www.myapp.com/whatever

    `${window.location.origin.toString()}/whateverRoute/`
    ce n'est pas de travail
    vérifiez que vous êtes en interpolant correctement. vérifiez ensuite dans la console que vous avez le droit de la portée de la fenêtre de l'emplacement. Il serait 1000000X plus facile de voir ce qui n'allait pas avec votre code si vous partager un extrait.

    OriginalL'auteur Denis S Dujota