Navigeringstillstånd i React Router

Om vi klickar på produkter i listan, ser vi att sidan med produkten första gången laddas med fördröjning, och de andra gångerna snabbare, samma sak vid tillägg och uppdatering av produkt, eftersom vi har cache på klientsidan.

I den här lektionen kommer vi att visa användaren i vilket tillstånd vår sida befinner sig. Här kan hooken useNavigation hjälpa oss. Resultatet av sitt arbete returnerar denna hook ett objekt med en rad egenskaper. Vi kommer att vara intresserade av en av dem - egenskapen state.

Egenskapen state kan ha 3 värden: 'idle' (inget händer), 'submitting' (när ett formulär skickas via POST, PUT, PATCH eller DELETE och action för routen anropas), 'loading' (när loader för nästa route anropas för att rendera nästa sida). Vi kommer att vara intresserade av det sista värdet.

Låt oss gå in i filen root.jsx och importera denna hook:

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

Sedan, för resultatet som returneras av hooken, skapar vi en variabel navigation i funktionen Root - före return:

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

Och låt oss nu använda dess egenskap state, om det är värdet 'loading', så sätter vi klassen loading för div:en där vår produktdata renderas:

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

Allt som återstår för oss är att lägga till stilar för klassen loading i index.css. Låt oss i laddningstillstånd helt enkelt öka opacity:

div.loading {
	opacity: 0.3;
}

Nu, om vi, efter att ha laddat om webbplatsen, klickar på produkter i listan eller, till exempel, lägger till en ny produkt, kommer vi att se att den aktuella sidan för ett ögonblick bleknar innan nästa sida visas.

Ta applikationen du skapade i uppgifterna till tidigare lektioner. Använd lektionens material och med hjälp av hooken useNavigation, se till att användaren kan se att nästa sida med studentdata laddas.