निराकरण: राउटर आळशी लोड प्रतिक्रिया

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 राउटरसह आळशी लोडिंग योग्यरित्या लागू करण्यासाठी React Loadable सारख्या काही लायब्ररी वापरण्याची आवश्यकता असू शकते.

आळशी लोड प्रतिक्रिया काय आहे

रिअॅक्ट लेझी लोड हे रिअॅक्ट राउटरचे वैशिष्ट्य आहे जे मागणीनुसार घटक लोड करण्याची परवानगी देते. याचा अर्थ असा की सर्व घटक एकाच वेळी लोड करण्याऐवजी, जेव्हा आवश्यक असेल तेव्हा फक्त आवश्यक घटक लोड केले जातात. हे प्रारंभिक पृष्ठ लोड वेळ कमी करण्यास आणि कार्यप्रदर्शन सुधारण्यास मदत करते. हे चांगले कोड ऑर्गनायझेशन आणि चिंतेचे पृथक्करण करण्यास देखील अनुमती देते, कारण प्रत्येक घटक स्वतंत्रपणे लोड केला जाऊ शकतो.

मी माझ्या राउटरवर प्रतिक्रिया आळशी कसे वापरावे

React lazy हे React चे वैशिष्ट्य आहे जे तुम्हाला डायनॅमिकली घटक इंपोर्ट करू देते. याचा अर्थ असा की सर्व घटक अगोदर लोड करण्याऐवजी, आपण ते आवश्यकतेनुसार लोड करू शकता. मोठ्या ऍप्लिकेशन्समधील कार्यप्रदर्शन ऑप्टिमाइझ करण्यासाठी हे उपयुक्त ठरू शकते.

React राउटरमध्ये तुमच्या राउटरवर React lazy वापरण्यासाठी, तुम्हाला डायनॅमिक इंपोर्ट कॉलमध्ये आळशी-लोड करायचा असलेला घटक गुंडाळणे आवश्यक आहे. उदाहरणार्थ:

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

त्यानंतर, तुमचे मार्ग परिभाषित करताना, फक्त MyComponent घटक याप्रमाणे रूट घटकामध्ये पास करा:

हे त्या मार्गावर नेव्हिगेट करताना प्रतिक्रिया राउटरला MyComponent घटक डायनॅमिकरित्या लोड करण्यास प्रवृत्त करेल.