હલ: રાઉટર બેકાર લોડ પ્રતિક્રિયા

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 App() { 

  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 App;

}> //આ સસ્પેન્સ ટેગ અમારા તમામ રૂટ્સને લોડિંગના ફોલબેક પ્રોપ્સ સાથે લપેટી લે છે... જો કોઈ રૂટ લોડ થવામાં સમય લે છે

7. //સ્વિચ ટેગ ખાતરી કરશે કે એક જ સમયે માત્ર એક જ રૂટ રેન્ડર થયો છે

8. //આ રૂટ હોમ કમ્પોનન્ટ રેન્ડર કરશે જ્યારે ચોક્કસ પાથ “/” મેળ ખાય છે

9. //આ રૂટ ઘટક વિશે રેન્ડર કરશે જ્યારે પાથ "/ વિશે" મેળ ખાય છે

10. //આ રૂટ સંપર્ક ઘટક રેન્ડર કરશે જ્યારે પાથ “/સંપર્ક” મેળ ખાય છે ) } ડિફોલ્ટ એપ્લિકેશન નિકાસ કરો; //આખરે અમે બધા ટૅગ્સ બંધ કરીએ છીએ અને અમારી એપ્લિકેશન નિકાસ કરીએ છીએ

આળસુ લોડ સમસ્યા

સુસ્ત લોડિંગ એ એક તકનીક છે જેનો ઉપયોગ અમુક ઘટકોના લોડિંગમાં વિલંબ કરવા માટે થાય છે જ્યાં સુધી તેમની જરૂર ન હોય. આ કોઈપણ સમયે જરૂરી હોય તે લોડ કરીને એપ્લિકેશનના પ્રદર્શનને સુધારવામાં મદદ કરી શકે છે. જો કે, રીએક્ટ રાઉટરનો ઉપયોગ કરતી વખતે આ સમસ્યા હોઈ શકે છે, કારણ કે તે બોક્સની બહાર આળસુ લોડિંગને સપોર્ટ કરતું નથી. આ સમસ્યાનો ઉકેલ લાવવા માટે, વિકાસકર્તાઓએ આળસુ લોડિંગને સક્ષમ કરવા માટે તેમના રૂટને મેન્યુઅલી ગોઠવવું આવશ્યક છે. આમાં ગતિશીલ આયાત અને કોડ વિભાજન સેટઅપનો સમાવેશ થઈ શકે છે, જે જટિલ અને સમય માંગી લે તેવા કાર્યો હોઈ શકે છે. વધુમાં, રિએક્ટ રાઉટર સાથે સુસ્ત લોડિંગને યોગ્ય રીતે અમલમાં મૂકવા માટે રિએક્ટ લોડેબલ જેવી કેટલીક લાઇબ્રેરીઓનો ઉપયોગ કરવાની જરૂર પડી શકે છે.

રીએક્ટ લેઝી લોડ શું છે

રિએક્ટ લેઝી લોડ એ રિએક્ટ રાઉટરનું લક્ષણ છે જે માંગ પર ઘટકોના લોડિંગ માટે પરવાનગી આપે છે. આનો અર્થ એ છે કે તમામ ઘટકોને એકસાથે લોડ કરવાને બદલે, જ્યારે જરૂરી હોય ત્યારે માત્ર જરૂરી ઘટકો લોડ કરવામાં આવે છે. આ પ્રારંભિક પૃષ્ઠ લોડ સમય ઘટાડવામાં અને પ્રદર્શનને સુધારવામાં મદદ કરે છે. તે બહેતર કોડ સંગઠન અને ચિંતાઓને અલગ કરવાની પણ પરવાનગી આપે છે, કારણ કે દરેક ઘટક સ્વતંત્ર રીતે લોડ કરી શકાય છે.

હું મારા રાઉટર પર React lazy નો ઉપયોગ કેવી રીતે કરી શકું

રીએક્ટ લેઝી એ રીએક્ટની એક વિશેષતા છે જે તમને ગતિશીલ રીતે ઘટકોને આયાત કરવાની મંજૂરી આપે છે. આનો અર્થ એ છે કે તમામ ઘટકોને અપફ્રન્ટ લોડ કરવાને બદલે, તમે તેમને જરૂરિયાત મુજબ લોડ કરી શકો છો. આ મોટી એપ્લિકેશન્સમાં પ્રદર્શનને ઑપ્ટિમાઇઝ કરવા માટે ઉપયોગી થઈ શકે છે.

રિએક્ટ રાઉટરમાં તમારા રાઉટર પર રીએક્ટ લેઝીનો ઉપયોગ કરવા માટે, તમારે ડાયનેમિક ઈમ્પોર્ટ કોલમાં લેઝી-લોડ કરવા ઈચ્છતા હોય તે ઘટકને લપેટી લેવાની જરૂર છે. દાખ્લા તરીકે:

const MyComponent = React.lazy(() => import('./MyComponent'));

પછી, તમારા રૂટ્સને વ્યાખ્યાયિત કરતી વખતે, ફક્ત MyComponent ઘટકને આ રીતે રૂટ ઘટકમાં પાસ કરો:

આનાથી તે રૂટ પર નેવિગેટ કરતી વખતે પ્રતિક્રિયા રાઉટર MyComponent ઘટકને ગતિશીલ રીતે લોડ કરશે.