ಪರಿಹರಿಸಲಾಗಿದೆ: ರಿಯಾಕ್ಟ್ ರೂಟರ್ ಲೇಜಿ ಲೋಡ್

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. //ಈ ಮಾರ್ಗವು "/about" ಮಾರ್ಗವನ್ನು ಹೊಂದಿಕೆಯಾದಾಗ ಕಾಂಪೊನೆಂಟ್ ಕುರಿತು ನಿರೂಪಿಸುತ್ತದೆ

10. //ಈ ಮಾರ್ಗವು "/ಸಂಪರ್ಕ" ಮಾರ್ಗವನ್ನು ಹೊಂದಿಕೆಯಾದಾಗ ಸಂಪರ್ಕ ಘಟಕವನ್ನು ನಿರೂಪಿಸುತ್ತದೆ ) } ಡೀಫಾಲ್ಟ್ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ರಫ್ತು ಮಾಡಿ; //ಅಂತಿಮವಾಗಿ ನಾವು ಎಲ್ಲಾ ಟ್ಯಾಗ್‌ಗಳನ್ನು ಮುಚ್ಚುತ್ತೇವೆ ಮತ್ತು ನಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ರಫ್ತು ಮಾಡುತ್ತೇವೆ

ಲೇಜಿ ಲೋಡ್ ಸಮಸ್ಯೆ

ಲೇಜಿ ಲೋಡಿಂಗ್ ಎನ್ನುವುದು ಕೆಲವು ಘಟಕಗಳನ್ನು ಅಗತ್ಯವಿರುವವರೆಗೆ ಲೋಡ್ ಮಾಡುವುದನ್ನು ವಿಳಂಬಗೊಳಿಸಲು ಬಳಸುವ ತಂತ್ರವಾಗಿದೆ. ಯಾವುದೇ ಸಮಯದಲ್ಲಿ ಅಗತ್ಯವಿರುವದನ್ನು ಮಾತ್ರ ಲೋಡ್ ಮಾಡುವ ಮೂಲಕ ಅಪ್ಲಿಕೇಶನ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸಲು ಇದು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಆದಾಗ್ಯೂ, ರಿಯಾಕ್ಟ್ ರೂಟರ್ ಅನ್ನು ಬಳಸುವಾಗ ಇದು ಸಮಸ್ಯೆಯಾಗಬಹುದು, ಏಕೆಂದರೆ ಇದು ಬಾಕ್ಸ್‌ನಿಂದ ಸೋಮಾರಿಯಾದ ಲೋಡ್ ಅನ್ನು ಬೆಂಬಲಿಸುವುದಿಲ್ಲ. ಈ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸಲು, ಡೆವಲಪರ್‌ಗಳು ಸೋಮಾರಿಯಾದ ಲೋಡಿಂಗ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು ತಮ್ಮ ಮಾರ್ಗಗಳನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಕಾನ್ಫಿಗರ್ ಮಾಡಬೇಕು. ಇದು ಡೈನಾಮಿಕ್ ಆಮದುಗಳು ಮತ್ತು ಕೋಡ್ ವಿಭಜನೆಯನ್ನು ಹೊಂದಿಸುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ, ಇದು ಸಂಕೀರ್ಣ ಮತ್ತು ಸಮಯ-ಸೇವಿಸುವ ಕಾರ್ಯಗಳಾಗಿರಬಹುದು. ಹೆಚ್ಚುವರಿಯಾಗಿ, ರಿಯಾಕ್ಟ್ ರೂಟರ್‌ನೊಂದಿಗೆ ಲೇಜಿ ಲೋಡಿಂಗ್ ಅನ್ನು ಸರಿಯಾಗಿ ಕಾರ್ಯಗತಗೊಳಿಸಲು ರಿಯಾಕ್ಟ್ ಲೋಡ್ ಮಾಡಬಹುದಾದಂತಹ ಕೆಲವು ಲೈಬ್ರರಿಗಳನ್ನು ಬಳಸಬೇಕಾಗಬಹುದು.

ರಿಯಾಕ್ಟ್ ಲೇಜಿ ಲೋಡ್ ಎಂದರೇನು

ರಿಯಾಕ್ಟ್ ಲೇಜಿ ಲೋಡ್ ಎನ್ನುವುದು ರಿಯಾಕ್ಟ್ ರೂಟರ್‌ನ ವೈಶಿಷ್ಟ್ಯವಾಗಿದ್ದು ಅದು ಬೇಡಿಕೆಯ ಮೇಲೆ ಘಟಕಗಳನ್ನು ಲೋಡ್ ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ. ಇದರರ್ಥ ಎಲ್ಲಾ ಘಟಕಗಳನ್ನು ಒಂದೇ ಬಾರಿಗೆ ಲೋಡ್ ಮಾಡುವ ಬದಲು, ಅಗತ್ಯವಿರುವಾಗ ಮಾತ್ರ ಅಗತ್ಯ ಘಟಕಗಳನ್ನು ಲೋಡ್ ಮಾಡಲಾಗುತ್ತದೆ. ಇದು ಆರಂಭಿಕ ಪುಟ ಲೋಡ್ ಸಮಯವನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಪ್ರತಿ ಘಟಕವನ್ನು ಸ್ವತಂತ್ರವಾಗಿ ಲೋಡ್ ಮಾಡಬಹುದಾದ್ದರಿಂದ ಇದು ಉತ್ತಮ ಕೋಡ್ ಸಂಘಟನೆ ಮತ್ತು ಕಾಳಜಿಗಳ ಪ್ರತ್ಯೇಕತೆಯನ್ನು ಅನುಮತಿಸುತ್ತದೆ.

ನನ್ನ ರೂಟರ್‌ನಲ್ಲಿ ನಾನು ರಿಯಾಕ್ಟ್ ಲೇಜಿ ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು

ರಿಯಾಕ್ಟ್ ಲೇಜಿ ಎನ್ನುವುದು ರಿಯಾಕ್ಟ್‌ನ ವೈಶಿಷ್ಟ್ಯವಾಗಿದ್ದು ಅದು ಘಟಕಗಳನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಆಮದು ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಇದರರ್ಥ ಎಲ್ಲಾ ಘಟಕಗಳನ್ನು ಮುಂಗಡವಾಗಿ ಲೋಡ್ ಮಾಡುವ ಬದಲು, ನೀವು ಅಗತ್ಯವಿರುವಂತೆ ಅವುಗಳನ್ನು ಲೋಡ್ ಮಾಡಬಹುದು. ದೊಡ್ಡ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಉತ್ತಮಗೊಳಿಸಲು ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ.

ರಿಯಾಕ್ಟ್ ರೂಟರ್‌ನಲ್ಲಿ ನಿಮ್ಮ ರೂಟರ್‌ನಲ್ಲಿ ರಿಯಾಕ್ಟ್ ಲೇಜಿಯನ್ನು ಬಳಸಲು, ಡೈನಾಮಿಕ್ ಆಮದು ಕರೆಯಲ್ಲಿ ನೀವು ಲೇಜಿ-ಲೋಡ್ ಮಾಡಲು ಬಯಸುವ ಘಟಕವನ್ನು ಸುತ್ತುವ ಅಗತ್ಯವಿದೆ. ಉದಾಹರಣೆಗೆ:

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

ನಂತರ, ನಿಮ್ಮ ಮಾರ್ಗಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವಾಗ, MyComponent ಘಟಕವನ್ನು ಮಾರ್ಗದ ಘಟಕಕ್ಕೆ ರವಾನಿಸಿ:

ಇದು ಆ ಮಾರ್ಗಕ್ಕೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡುವಾಗ ರಿಯಾಕ್ಟ್ ರೂಟರ್ ಮೈಕಾಂಪೊನೆಂಟ್ ಘಟಕವನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಲೋಡ್ ಮಾಡಲು ಕಾರಣವಾಗುತ್ತದೆ.