React Router හි සංචාලන තත්ත්වය

අපි ලැයිස්තුවේ ඇති නිෂ්පාදන මත ක්ලික් කළහොත්, පළමු වතාවට පිටුව නිෂ්පාදනය සමඟ පූරණය වීමට ප්‍රමාද වන බව අපට පෙනේ, ඉතිරිව ඇති ඒවා දැනටමත් වේගයෙන්, එසේම නිෂ්පාදනයක් එකතු කිරීම සහ යාවත්කාලීන කිරීමේදී, අපට ඇති බැවින් ගැනුම්කරු පැත්තේ කෑෂ්.

මෙම පාඩමෙන් අපි පරිශීලකයාට පෙන්වන්නෙමු අපේ පිටුව කුමන තත්ත්වයක පවතියිද යන්න. මෙයට සහාය වීමට අපට හැකිය කොක් useNavigation. එහි ප්‍රති ing ලයක් ලෙස මෙම කොක් ගුණාංග ගණනාවක් සහිත වස්තුවක් නිකුත් කරයි. අපි උනන්දුවක් දක්වන්නෙමු ඒවායින් එකක් - දේපල state.

දේපල state 3 තිබිය හැක අගයන්: 'idle' (කිසිවක් සිදු නොවේ), 'submitting' (පෝරමයක් සම්පූර්ණ කරන විට POST, PUT, PATCH හෝ DELETE හරහා action ඇමතීම මාර්ගය), 'loading' (ඇමතූ විට ඊළඟ පිටුව පින්තාරු කිරීම සඳහා ඊළඟ මාර්ගය සඳහා පූරකය ඊළඟ පිටුව). අපි උනන්දුවක් දක්වන්නෙමු අන්තිම අගය.

අපි ගොනුවට යමු root.jsx සහ මෙම කොක් ආයාත කරන්න:

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

ඉන්පසු, කොක් විසින් ආපසු ලබා දෙන ප්‍රති result ලය සඳහා, විචල්‍යයක් සාදන්න navigation ශ්‍රිතයේ Root - return ඉදිරියෙන්:

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

දැන් අපි එහි දේපල භාවිතා කරමු state, මෙය අගයක් නම් 'loading', එවිට අපි පන්තිය ස්ථාපිත කරන්නෙමු loading අපගේ ඇති ඩිව් සඳහා නිෂ්පාදන දත්ත ඇදීම සිදුවේ:

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

පන්තිය සඳහා විලාසිතා එකතු කිරීමට අපට ඉතිරිව ඇත loading in index.css. අපි කරමු පූරණ තත්ත්වයේදී සරලව වැඩි කරන්න opacity:

div.loading {
	opacity: 0.3;
}

දැන්, අවසානයේ නම්, අඩවිය පුනර්ජීවනය කරමින්, ලැයිස්තුවේ ඇති නිෂ්පාදන මත ක්ලික් කරන්න හෝ, උදාහරණයක් ලෙස, නව නිෂ්පාදනයක් එක් කරන්න, අපි දැක ගන්න, වත්මන් පිටුව යම් කාලයක් තුළ ඊළඟ පිටුව දිස්වීමට පෙර අඳුරු වනු ඇත.

ඔබ විසින් සාදන ලද යෙදුම ගන්න පසුගිය පාඩම් සඳහා කාර්යයන්. භාවිතා කිරීම පාඩමේ ද්‍රව්‍ය, කොක් ආධාරයෙන් useNavigation එය කරන්න පරිශීලකයාට දැක ගත හැකිය පිටුව දත්ත සමඟ සිසුවෙකු පූරණය වෙමින් පවතී.