web-dev-qa-db-de.com

React-Redux ruft die Site-Basis-URL/window.location ab

Hoffentlich ist dies eine sehr einfache Frage:

Ich möchte eine Zeichenfolge erstellen, die die vollständige URL zu einer Seite auf meiner Website enthält, z. B .:

https://example.com/documents/1

Im Idealfall möchte ich dies in einem Container mit connect()- und mapStateToProps()_react-redux generieren. Wo die Seite ein Enkel eines React-Routers ist Route using browserHistory (also kann ich sie vielleicht irgendwie vom React-Router oder von browserHistory bekommen?) Wenn nötig, würde ich sie in einer vollständigen React-Klasse machen.

Aber ich kann für mein ganzes Leben nicht herausfinden, wie das geht. window (wie in window.location) ist immer undefined in mapStateToProps() (keine große Überraschung) und in der render() -Funktion der Komponenten meiner Ansicht nach.

Bisher habe ich nur Möglichkeiten gefunden, auf die aktuelle Route zuzugreifen, z. "/ documents/1", dies ist nur ein relativer Pfad und enthält nicht die Site-Basis-URL ( https://example.com/ )

6
stone

Denken Sie also zunächst daran, dass Ihr Code auf dem Client und dem Server ausgeführt wird, sodass jeder Zugriff auf das Fenster in eine Prüfung eingeschlossen werden muss.

  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 von Ihnen generierte URL im DOM angezeigt wird und Sie auf dem Client den Speicher vor dem ersten Rendern mit dieser URL füllen, wird ein Prüfsummenfehler angezeigt. Wenn Sie wirklich den Fehler vermeiden möchten, können Sie warten, bis componentDidMount() in Ihrer Root-Komponente die URL abgerufen/festgelegt hat.

11

Nach componentDidMount können Sie direkt auf den Origin-Speicherort zugreifen, um die Root-URL abzurufen.

Ich verwende den folgenden Code die ganze Zeit in meinem JSX, damit ich mich nicht um den Root-Pfad kümmern muss, zB: dev env das wäre localhost:3000/whatever, das Staging wird AppStaging.heroku/whatever/..... sein und in der Produktion würde es zu www.myapp.com/whatever ausgewertet.

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