[S8L1] React Router 1 Flashcards
Was ist Routing?
- Der Weg mit dem durch das Web navigiert wird
- Eine URL im Web Browser schickt die Website einen Request an Daten die irgendwo anders liegen
- Diese Daten werden zu unserem Browser geschickt und der Browser rendert die Website
Was ist Server Side Routing (SSR)?
- Naivigation auf Website
- Website requests data für webstie
- Server returned ein Dokument/HTML/Template zum Browser und Browser kann die Seite rendern
- Alles macht der Server! (Kompilieren des HTML)
- Bei jeder Navigation wird eine frische Webseite vom Browser geladen, zum Browser gesendet und der Browser refreshed die Website
Was ist Client Side Routing (CSR) ?
- Javascript mit einer Client App (Web, Desktop, Mobile) managed diie Daten für die Applikation in seinem Memory
- Daher hat der Browser in seinem Memory alles um andere URLs zu laden
- Wenn zusätzliche Daten benötigt werden, wird ein API request und eine JSON wird zurückgegeben, aber keine ganze HTML Seite
- Da der Browser nicht mehr kompiliert, benötigt man keine Refreshes der Website um zwischen Routes zu wechseln!
Benutzt React Client Side oder Server Side Routing?
-Client Side Routing
Was sind die Vorteile von Server Side Routing? (SSR)
- Routes Requesten nur die Daten, welche sie benötigen und nicht mehr
- SEO Vorteile, durch lange Tradition dieser Art. Will man vorne in Google sein braucht man SSR.
Was sind die Nachteile von Server Side Routing? (SSR)
- Jeder Request führt zu einem Seiten Refresh, daher wird unnötige Daten requested. Header und Footer werden oft tausend Mal neugeladen, obwohl sie sich nie ändern.
- Das Rendern der Website kann ein wenig dauern, bei großen Dateien oder langsamer Verbindung.
Was sind die Vorteile von Client Side Routing?
- Es lädt nicht die ganze Seite neu beim Refreshen
- Weniger Daten werden verarbeitet, daher ist das switchen von Routes schneller
- Smooth transitions und animations zwischen Routes sind einfacher
Was sind die Nachteile von Client Side Routing?
- Beim ersten Request muss die ganze Website geladen werden, daher ist das erste Laden etwas langsamer
- Außerdem werden beim ersten Laden auch Views geladen, die den Nutzer evtl gar nicht interessieren
- Benötigt Setup und Libraries, mehr Arbeit und Komplexität
- SEO Nachteile
Was ist die Philosophie von React Router?
- React Router hat nicht den Prinzipien gefolgt, daher wurde mit Version 4 Dynamic Routing mit einem Rehaul ermöglicht
- React Router V4 ist deklarativ und Routing findet statt wenn APP rendert
- V4 erlaubt auch das Composen von Routes mit UI Components
Wie fügt man einem Projekt React Router hinzu?
yarn add react-router-dom
import { BrowserRouter as Router } from ‘react-router-dom’;
ReactDOM .render(
Router/>
App/>
/Router>,
document.getElementById("root"));
Warum importiert man BrowserRouter und nicht Router von react-routercom?
- Weil dann die App nicht nur in BrowserRouter genested wird, sondern auch in Browser.
- Code und Nesting in DOM sind kongruenter
Wofür ist die match Property in State vom Router Element?
-Refenziert die aktuelle URL
-
Was macht das Router history Object?
- Liefert Protope Methoden wie goBack, goForward etc
- Zum navigieren
Was ist alles was man von react-router-dom importiert?
-Components, z.B. Route ist eine Component
Was bedeutet es, dass der Code in React Router deklarativ ist?
- Man schaut auf den Code und sieht was passiert
- Man kann gedacht explizit deklarieren
- “I habe eine Route, welche wenn der Path /users ist die component Users rendern wird”
Wie wird die Component zu / /contact und /about genannt?
/ ist Home Component
Route exact path="/" component={Home} />
/contact ist Contact Component
Route path="/contact" component={Contact} />
/about ist About Component
Route path="/about" component={About} />Ist man wenn man auf /contact ist in React Route auch noch auf der Route /?
-Ja, weil die Routes mit Regex nicht exakt gecheckt werden, befindet man sich auf beiden Seiten
-Das löst man dadurch, dass man die Home route mit der exact Props ergänzt
Route exact path=”/” component={Home} />
Was sind Dynamic Routes?
- Browser können dynamische Routen aufrufen mit Params
- React Router wird nur conditionally die URL mit den zugehörigen Params rendern
Was sind Dynamic Routes nützlich?
-Betrachten einer Profilansicht bestimmten ID von einem User
Wie setzt man eine Dynamic Route in React?
Route path=”/users/:usersID” compontent={SingleUser] />
Wie sieht eine Dynamic Route in der URL aus?
website/users/5
Warum ist das match Object relevant bei Dynamic Routing?
- Wenn die SingleUser Component die URL mit der ID erhält muss sie auf die ID der URL zugreifen
- Die Route besitzt ein match Object, welche den Key params: besitzt. Params enthält dynamic Daten.
- Das match Object ist verfübar für das SingleUser Component via Props.match.userid
Was ist eine Single Page Application?
- Eine einzelne HTML Page, die dem Browser direkt am Anfang beim Page Load geserved wird
- Der Apps ist schon im Browser geladen und muss daher nicht mehr refreshed werden
- Server Side Routing Apps sind verschiedene HTML Pages
Was ist Client Side Routing (CSR) ?
