Navigationszustand in React Router

Wenn wir auf Produkte in der Liste klicken, sehen wir, dass die Produktseite beim ersten Mal mit Verzögerung geladen wird, und bei den weiteren bereits schnell, das Gleiche gilt beim Hinzufügen und Aktualisieren eines Produkts, da wir einen Client-seitigen Cache haben.

In dieser Lektion werden wir dem Benutzer zeigen, in welchem Zustand sich unsere Seite befindet. Dabei kann uns der Hook useNavigation helfen. Als Ergebnis seiner Arbeit liefert dieser Hook ein Objekt mit einer Reihe von Eigenschaften. Uns wird eine davon interessieren - die Eigenschaft state.

Die Eigenschaft state kann 3 Werte haben: 'idle' (nichts passiert), 'submitting' (wenn beim Absenden eines Formulars über POST, PUT, PATCH oder DELETE eine action der Route aufgerufen wurde), 'loading' (wenn der Loader für die nächste Route aufgerufen wurde, um die nächste Seite zu rendern). Uns wird der letzte Wert interessieren.

Gehen wir in die Datei root.jsx und importieren diesen Hook:

import { useNavigation } from 'react-router-dom';

Dann, für das vom Hook zurückgegebene Ergebnis, erstellen wir eine Variable navigation in der Funktion Root - vor return:

const { products } = useLoaderData();
const navigation = useNavigation();

Und nun nutzen wir ihre Eigenschaft state, wenn dies der Wert 'loading' ist, dann setzen wir die Klasse loading für das Div, in dem unsere Produktdaten gerendert werden:

<div id="product" className={navigation.state === 'loading' ? 'loading' : ''}>
	<Outlet />
</div>

Uns bleibt noch, Stile für die Klasse loading in index.css hinzuzufügen. Lasst uns im Fall des Ladezustands einfach die opacity erhöhen:

div.loading {
	opacity: 0.3;
}

Wenn wir nun, nach einem Neuladen der Website, auf Produkte in der Liste klicken oder, zum Beispiel, ein neues Produkt hinzufügen, werden wir sehen, dass die aktuelle Seite für einen Moment verblasst, bevor die nächste erscheint.

Nehmen Sie die Anwendung, die Sie in den Aufgaben zu vorherigen Lektionen erstellt haben. Nutzen Sie die Materialien der Lektion und machen Sie mithilfe des Hooks useNavigation so, dass der Benutzer sehen kann, dass die nächste Seite mit Studentendaten geladen wird.