[S8L2] React Router 2

Question 1

Was ist Render Props?

Answer 1

• Ein erweitertes React Pattern um Daten zu Components zu geben
• Das Value des Props ist dabei eine Function
• Die Props Function wird eine Component zurückliefern, die wir rendern möchten

Question 2

Was ist bei render Props zu beachten?

Answer 2

• Match, History, Location müssen explizit weitergereicht werden, ansonsten gehen sie verloren
• Die Render Props Components müssen mit JSX Syntax referenziert werden

Question 3

Wie sieht ein Render Prop aus?

Answer 3

Route path=”/home” render={(props) => (MyComponent {…props} someProp={someData} otherProp={data} /> )} />

Question 4

Was sind nested Routes?

Answer 4

-Route ist nur eine React Component, kann also alles rendern
-Erlauben es eine sehr spezifische Adresse zu navigieren, um speziellen Inhalt der Seite darzustellen
-

Question 5

Was ist die Konsequenz, wenn man keine nestes Routes nutzt?

Question 6

Was sind Nachteile von nested Routes?

Answer 6

• Der Code wird komplexer
• Oftmals muss das exact path Props genutzt werden damit die Seite richtig dargestellt wird
• Man muss früh planen wie die Website abläuft

Question 7

Was sind History Objecte in React Router?

Answer 7

• History kommt eigentlich vom Browser selbst von Window.History
• Hält Informationen darüber wo man sich im Navigationsstack befindet
• Das JS Props History Object har viele nützliche Hilfsmethoden wie action, goBack, goForward, length, listen

Question 8

Was macht function greet() {
props.history.push(‘/greet/Luke’)
}

Answer 8

• Die History Methode .push akzeptiert einen String als Location in den Routes
• Und ändert die aktuelle URL dann zu diesem String

Question 9

Wann benutzt man normalerweise die History.push Function?

Answer 9

• Conditionally, wenn die API neue Daten geliefert hat
• Oder wenn die Datenbank ein Object gespeichert hat und man das erfolgreiche Speichern visualisieren möchte oder zur ErrorPage etc

Question 10

Was ist der Unterschied zwischen Link und NavLink Component in React Router?

Answer 10

• NavLink hat ein active attribute prop, welches man herumreichen kann und es heißt activeClassName
• Damit kann man ein active und nicht active Effect erschaffen

Question 11

Warum möchte man manchmal auch nicht exact für einen Path nutzen?

Answer 11

-Weil nested Routes dann nicht mehr Regex exact sind und daher alle nested Routes nichts mehr rendern