રીએક્ટ રાઉટર v6 લેઝી સસ્પેન્સને લગતી મુખ્ય સમસ્યા એ છે કે તે હજુ સુધી તમામ બ્રાઉઝર્સ દ્વારા સંપૂર્ણ રીતે સપોર્ટેડ નથી. આનો અર્થ એ છે કે React Router v6 lazy suspense નો ઉપયોગ કરીને વેબસાઇટ્સ પર અમુક પૃષ્ઠો અથવા સુવિધાઓને ઍક્સેસ કરવાનો પ્રયાસ કરતી વખતે વપરાશકર્તાઓ સમસ્યાઓ અનુભવી શકે છે. વધુમાં, હજુ પણ કેટલીક બગ્સ અને પર્ફોર્મન્સ સમસ્યાઓ છે કે જેને પ્રોડક્શન એન્વાયર્નમેન્ટ્સમાં ઉપયોગમાં લઈ શકાય તે પહેલાં તેને સંબોધિત કરવાની જરૂર છે. છેલ્લે, સસ્પેન્સ સાથેના સુસ્ત લોડિંગ ઘટકો માટેનું API હજુ તેના પ્રારંભિક તબક્કામાં છે અને હાલની એપ્લિકેશનો સાથે સુસંગતતા સુનિશ્ચિત કરવા માટે વધારાના વિકાસ સમયની જરૂર પડી શકે છે.
import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));
const Contact = React.lazy(() => import('./Contact'));
function AppRouter() {
return (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</Suspense>
</Router>
);
}
export default AppRouter;
1. આ કોડ React લાઇબ્રેરી, તેમજ Reactમાંથી સસ્પેન્સ ઘટક અને બ્રાઉઝર રાઉટર, રૂટ અને સ્વિચ ઘટકોને react-router-dom માંથી આયાત કરે છે.
2. તે પછી રિએક્ટની આળસુ લોડિંગ સુવિધાનો ઉપયોગ કરીને તેમને સંબંધિત ફાઇલોમાંથી આયાત કરવા માટે ત્રણ ઘટકો (ઘર, વિશે, સંપર્ક) વ્યાખ્યાયિત કરે છે.
3. AppRouter ફંક્શન વ્યાખ્યાયિત થયેલ છે જે રાઉટર ઘટક પરત કરે છે જેમાં સસ્પેન્સ ઘટક તેની અંદર સ્વિચ ઘટક હોય છે.
4. સ્વિચ ઘટકની અંદર ત્રણ રૂટ ઘટકો છે જે દરેક આયાત કરેલ ઘટકોમાંથી એકને રેન્ડર કરે છે જ્યારે તેમના સંબંધિત પાથ URL માં મેળ ખાય છે (દા.ત., '/' હોમ માટે).
5. અંતે, AppRouter ને નિકાસ કરવામાં આવે છે જેથી તેનો ઉપયોગ એપ્લિકેશનમાં અન્યત્ર થઈ શકે.
રીએક્ટ રાઉટર v6 માં તમે આળસુ લોડિંગનો ઉપયોગ કેવી રીતે કરશો
v6
સુસ્ત લોડિંગ એ એક તકનીક છે જેનો ઉપયોગ અમુક ઘટકોના લોડિંગને જ્યાં સુધી જરૂરી ન હોય ત્યાં સુધી સ્થગિત કરવા માટે થાય છે. પ્રતિક્રિયા રાઉટર v6 માં, ગતિશીલ આયાત() વાક્યરચનાનો ઉપયોગ કરીને સુસ્ત લોડિંગ પ્રાપ્ત કરી શકાય છે. આ વાક્યરચના તમને તમારા કોડને બહુવિધ બંડલ્સમાં વિભાજિત કરવાની મંજૂરી આપે છે જે પછી માંગ પર અથવા સમાંતર લોડ કરી શકાય છે. આ પ્રારંભિક બંડલનું કદ ઘટાડવામાં અને પ્રદર્શન સુધારવામાં મદદ કરે છે. રીએક્ટ રાઉટર v6 સાથે આળસુ લોડિંગનો ઉપયોગ કરવા માટે, તમારે તે ઘટકને લપેટી લેવું આવશ્યક છે કે જેને તમે ગતિશીલ આયાત() કૉલમાં આળસુ લોડ કરવા માંગો છો. આયાત() કૉલ એક વચન પાછું આપશે જે જ્યારે ઘટક લોડ થઈ જાય અને રેન્ડર કરવા માટે તૈયાર હોય ત્યારે ઉકેલાઈ જશે.
પ્રતિક્રિયામાં સસ્પેન્સ અને આળસુ શું છે
રિએક્ટ રાઉટરમાં સસ્પેન્સ એ અમુક શરત પૂરી ન થાય ત્યાં સુધી રૂટના લોડિંગમાં વિલંબ કરવાનો એક માર્ગ છે. આનો ઉપયોગ જ્યારે જરૂર હોય ત્યારે જ રૂટ લોડ કરીને એપ્લિકેશનના પ્રદર્શનને સુધારવા માટે થઈ શકે છે. ઉદાહરણ તરીકે, જો કોઈ વપરાશકર્તા એવા પેજ પર નેવિગેટ કરી રહ્યો હોય જેને પ્રમાણીકરણની જરૂર હોય, તો જ્યાં સુધી પ્રમાણીકરણ પૂર્ણ ન થાય ત્યાં સુધી રૂટમાં વિલંબ થઈ શકે છે.
રિએક્ટ રાઉટરમાં આળસુ લોડિંગ ઘટકોને અસુમેળ રીતે લોડ કરવાની મંજૂરી આપે છે જ્યારે તે બધાને એક સાથે લોડ કરવાને બદલે જરૂરી હોય. આ જ્યારે જરૂરી હોય ત્યારે જ ઘટકોને લોડ કરીને કામગીરીમાં સુધારો કરે છે અને નેટવર્ક પર ટ્રાન્સફર કરવાની જરૂર હોય તેવા ડેટાની માત્રા ઘટાડે છે. આળસુ લોડિંગ કોડ વિભાજનમાં પણ મદદ કરે છે, જે મોટી એપ્લિકેશનોને નાના ભાગોમાં વિભાજિત કરવાની મંજૂરી આપે છે જે માંગ પર લોડ કરી શકાય છે.
