[S8L1] React Router 1

Question 1

Was ist Routing?

Answer 1

• 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

Question 2

Was ist Server Side Routing (SSR)?

Answer 2

• 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

Question 3

Was ist Client Side Routing (CSR) ?

Answer 3

• 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!

Question 4

Benutzt React Client Side oder Server Side Routing?

Answer 4

-Client Side Routing

Question 5

Was sind die Vorteile von Server Side Routing? (SSR)

Answer 5

• 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.

Question 6

Was sind die Nachteile von Server Side Routing? (SSR)

Answer 6

• 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.

Question 7

Was sind die Vorteile von Client Side Routing?

Answer 7

• 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

Question 8

Was sind die Nachteile von Client Side Routing?

Answer 8

• 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

Question 9

Was ist die Philosophie von React Router?

Answer 9

• 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

Question 10

Wie fügt man einem Projekt React Router hinzu?

Answer 10

yarn add react-router-dom

import { BrowserRouter as Router } from ‘react-router-dom’;

ReactDOM .render(
 Router/>
 App/>
/Router>,
document.getElementById("root"));

Question 11

Warum importiert man BrowserRouter und nicht Router von react-routercom?

Answer 11

• Weil dann die App nicht nur in BrowserRouter genested wird, sondern auch in Browser.
• Code und Nesting in DOM sind kongruenter

Question 12

Wofür ist die match Property in State vom Router Element?

Answer 12

-Refenziert die aktuelle URL

-

Question 13

Was macht das Router history Object?

Answer 13

• Liefert Protope Methoden wie goBack, goForward etc

- Zum navigieren

Question 14

Was ist alles was man von react-router-dom importiert?

Answer 14

-Components, z.B. Route ist eine Component

Question 15

Was bedeutet es, dass der Code in React Router deklarativ ist?

Answer 15

• 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”

Question 16

Wie wird die Component zu / /contact und /about genannt?

Answer 16

/ 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} />

Question 17

Ist man wenn man auf /contact ist in React Route auch noch auf der Route /?

Answer 17

-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} />

Question 18

Was sind Dynamic Routes?

Answer 18

• Browser können dynamische Routen aufrufen mit Params

- React Router wird nur conditionally die URL mit den zugehörigen Params rendern

Question 19

Was sind Dynamic Routes nützlich?

Answer 19

-Betrachten einer Profilansicht bestimmten ID von einem User

Question 20

Wie setzt man eine Dynamic Route in React?

Answer 20

Route path=”/users/:usersID” compontent={SingleUser] />

Question 21

Wie sieht eine Dynamic Route in der URL aus?

Answer 21

website/users/5

Question 22

Warum ist das match Object relevant bei Dynamic Routing?

Answer 22

• 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

Question 23

Was ist eine Single Page Application?

Answer 23

• 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

Question 24

Was ist Client Side Routing (CSR) ?

Question 25

Was ist ein bekanntes Beispiel für eine Single Page Application?

Answer 25

- Facebook lädt die Seiten nicht neu, wenn man Groups, Stores, Browse wechselt - Ist schneller beim Wechseln von Seiten, da keine neue HTML Seite vom Server geladen wird

Question 26

Was ist Deep Linking?

Answer 26

-Tiefer Verlinken von IDs/spezifischen Dingen auf einer Website

Question 27

Warum ist das Kontrolieren der URL über den Zustand der Web Applikation wichtig?

Answer 27

-Wenn der User z.B. einen bestimmten Artikel an einen Freund teilen möchte, kann er einfach die URL weitergeben

Question 28

Ist die ID aus der URL für Dynamic Routing ein String oder eine Number?

Answer 28

-Immer ein String, daher muss man vor einem Vergleich mit dieser noch die andere ID durch String Interpolation in eine ID umwandeln const singleUser = userList.find(user => `${uiser.id}` === id);

Question 29

Was macht die Link Component?

Answer 29

-Hilft zwischen Routes zu navigieren

Question 30

Wie nutzt man die Link Component?

Answer 30

import { Route, Link } from "react-router-dom"; Link to="/about">About /Link>

Question 31

Wofür ist die .find() Methode beim Dynamic Routing?

Answer 31

-const item = items.find((item) => ``${item.id}` == props.match.params.id)