Reagieren-redux bekommen Website-Basis-URL / Fenster.Lage

Hoffentlich ist dies eine sehr einfache Frage:

Ich möchte einen string mit der vollständigen URL zu einer Seite auf meiner Website, wie:

https://example.com/documents/1

Im Idealfall würde ich mag zu generieren, diese in einen reagieren-redux connect()-ed-container, in mapStateToProps(). Wo die Seite ist ein Enkel von einem reagieren-router Route mit browserHistory (vielleicht kann ich es bekommen, reagieren-router oder browserHistory irgendwie?) Wenn nötig, ich würde es tun, in eine voll-auf Reagieren Klasse.

Aber ich kann nicht für das Leben von mir herauszufinden, wie dies zu tun. window (wie in window.location) ist immer undefined im mapStateToProps() (was keine überraschung ist) und meiner Meinung Komponenten render() Funktion.

Bisher habe ich nur Möglichkeiten gefunden, um auf die aktuelle route, z.B. "/documents/1", die nur einen relativen Pfad und nicht den Website-Basis-url (https://example.com/)

  • Brauchst du für dieses starke auf dem server oder nur client?
  • Nur auf der client-Seite.
InformationsquelleAutor stone | 2016-07-20
  1. 14

    Also, Erstens, denken Sie daran, Ihr code läuft auf der client-und server, so dass jeder Zugriff auf Fenster muss gewickelt werden in einer Prüfung. 

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

    Wenn die URL, die Sie erzeugen, zeigt in den DOM, und auf der client-füllen Sie den Speicher mit diese URL vor dem ersten Rendern, wirst du einen checksum error. Wenn Sie wirklich wollen den Fehler vermeiden, Sie können warten, bis componentDidMount() in Ihrem root-Komponente zum Lesen/setzen der url.

    • Vielen Dank, das Lesen window.location im componentDidMount gearbeitet. Ich tun, dass Sie aus der top-level-Komponente in der app und speichern Sie es in den Staat. Darf ich Fragen, a) warum Sie vorschlagen, tun es server-side - wäre das so, dass server-side-rendering kann auch arbeiten??? und b) wie/wo würden Sie vorschlagen, speichern Sie die url aus der server-Seite, so dass der client-code Lesen können?
    • nun habe ich darüber nachgedacht, ja es gibt keinen guten Grund, es zu bekommen auf dem server, also habe ich entfernt, der Kommentar meiner Antwort.
    • Genau für das, was ich suchte
    InformationsquelleAutor David Gilbertson
  2. 2

    Nach componentDidMount haben Sie direkten Zugang zum Ausgangsort, so dass man die root-url.

    Verwende ich den untenstehenden code in meine JSX alle die Zeit, so dass ich nicht sorgen über den root-Pfad ab: dev env dies wäre localhost:3000/whatever, die Inszenierung dieses wird AppStaging.heroku/whatever/..... und in der Produktion wäre es bewerten zu www.myapp.com/whatever

    `${window.location.origin.toString()}/whateverRoute/`
    • das wird nicht funktionieren
    • überprüfen Sie, dass der interpolierende richtig. dann schauen Sie in die Konsole ein, Sie haben den richtigen Rahmen für die Fenster-Position. Es wäre 1000000X einfacher zu sehen, was ging falsch mit Ihrem code, wenn Sie teilen sich ein snippet.
    InformationsquelleAutor Denis S Dujota
Schreibe einen Kommentar