Wie man mit ReactJS Routing interne URLs aufrufbar macht

Durch ReactJS Routing kann man auch komplexe Web-Anwendungen mit eigener Seitenstruktur realisieren. Früher oder später braucht man für einzelne Bereiche eigenständige Urls. Diese sind dann auch direkt ansteuerbar.

Was kann die Komponente „react-router-dom“

Zunächst sei die Komponente einmal grob vorgestellt (im Sinne der Hands-on Mentalität). Mit react-router-dom  kann man einen (oder auch mehrere) Listener auf eingegebene URLs erstellen. Über einen BrowseRouter Component werden einzelne Routes definiert – und welcher Component bei passender URL an diese Stelle gerendert werden soll. Es können auch mehrere Routes greifen, so dass man unterschiedliche  Inhaltsbereiche über die URL dynamisch halten kann, während andere ihren Status halten.

Für den Fall, das nur eine Route zutreffen und verwendet werden darf, gibt es den Switch Component. Dieser innerhalb der BrowseRouter verwendet, sorgt dafür das nur die erste zutreffende Route gewählt wird. Das ist recht einfach und praktisch. Zudem kann man so als letzte Route einfach einen default als 404er Seiten-Route anlegen und hat seine Fehlermeldungsseitenfunktionalität schon direkt mit abgehakt.

React Anwendung mit Routes
React Anwendung mit Routes

Verwendung von dynamischen Urls

Fast jede Webseite mit in Listen dargestellten Inhalten benötigt die Übergabe von Parametern innerhalb der URL als „sprechendes Segment“. Sei es für eine eindeutige Produktbezeichnung oder ein Blog-Artikel. Dazu gibt es auch schon einen eingebauten Workflow. In das Match-Attribut des Route Component werden einfach Platzhalter eingefügt, die beim „greifen der Route“ in den zu rendernden Component übergeben werden (und dort ganz normal als Variable weiter verwendet werden können). Damit können auch gleich weitere Parameter schön innerhalb der URL mitgegeben werden.

React Routing mit Parameter
React Routing mit Parameter

Mit ReactJS Routing von der Single Page Application zur Webseite

Natürlich kann man seine Applikation auch ohne URLs für einzelne Bereiche umsetzen. Sollten die Inhalte direkt (von außen) ansteuerbar sein, wie zum Beispiel die deatilseite eines Blogbeitrags, dann führt von der Nutzerführung kein Weg daran vorbei.

Das muss man bei der Erstellung oder besser gar vorher bedenken (Planung ist alles, wie auch schon vorab in einem anderen Artikel erwähnt), denn die Anwendung in Sich kann dann über jede freigegebene URLs angesteuert werden. SO mit müssen auch alle Abhängigkeiten und Daten entsprechend zur Verfügung stehen wenn direkt eine URL geladen wird. 

Wenn man nur in einer bestimmten Komponente zu einem bestimmten Status benötigte Daten lädt, kommt es gegebenenfalls zu Problemen bei einem Direkteinstieg. 

Ein kleines Beispiel auf Github

Zu finden ist das Projekt als Branch von meinem React-Seed:
https://github.com/viebrockjoern/react-typescript-seedproject/tree/routing

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.