ಪರಿಹರಿಸಲಾಗಿದೆ: ರಿಯಾಕ್ಟ್ ರೂಟರ್ dom npm

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

import { BrowserRouter as Router, Route } from "react-router-dom";

<Router>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
</Router>

1. "'react-router-dom' ನಿಂದ {BrowserRouter ಅನ್ನು ರೂಟರ್ ಆಗಿ ಆಮದು ಮಾಡಿ, ಮಾರ್ಗ };"
ಈ ಸಾಲು ರಿಯಾಕ್ಟ್-ರೂಟರ್-ಡಾಮ್ ಲೈಬ್ರರಿಯಿಂದ ಬ್ರೌಸರ್ ರೂಟರ್ ಮತ್ತು ರೂಟ್ ಘಟಕಗಳನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳುತ್ತದೆ.

2. ""
ಈ ಸಾಲು ರೂಟರ್ ಘಟಕವನ್ನು ರಚಿಸುತ್ತದೆ ಅದನ್ನು ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ಎಲ್ಲಾ ಮಾರ್ಗಗಳನ್ನು ಸುತ್ತಲು ಬಳಸಲಾಗುತ್ತದೆ.

3. ""
ಈ ಸಾಲು ರೂಟ್ ಘಟಕವನ್ನು ರಚಿಸುತ್ತದೆ ಅದು ಮಾರ್ಗವು '/' ಆಗಿರುವಾಗ ಹೋಮ್ ಘಟಕವನ್ನು ನಿರೂಪಿಸುತ್ತದೆ. ಮಾರ್ಗವು ನಿಖರವಾಗಿ '/' ಆಗಿರುವಾಗ ಮಾತ್ರ ಈ ಮಾರ್ಗವನ್ನು ಹೊಂದಿಕೆಯಾಗುತ್ತದೆ ಎಂದು 'ನಿಖರವಾದ' ಪ್ರಾಪ್ ಖಚಿತಪಡಿಸುತ್ತದೆ.

4. "” ಈ ಸಾಲು ಮಾರ್ಗ ಘಟಕವನ್ನು ರಚಿಸುತ್ತದೆ ಅದು ಮಾರ್ಗವು '/about' ಆಗಿರುವಾಗ ಕುರಿತು ಘಟಕವನ್ನು ನಿರೂಪಿಸುತ್ತದೆ.

5. "" ಈ ಸಾಲು ರೂಟರ್ ಘಟಕವನ್ನು ಮುಚ್ಚುತ್ತದೆ ಮತ್ತು ನಮ್ಮ ಎಲ್ಲಾ ಮಾರ್ಗಗಳನ್ನು ಘೋಷಿಸಲಾಗಿದೆ ಎಂದು ಪ್ರತಿಕ್ರಿಯಿಸಲು ಸಂಕೇತಿಸುತ್ತದೆ.

npm ಪ್ಯಾಕೇಜ್ ಮ್ಯಾನೇಜರ್

NPM (ನೋಡ್ ಪ್ಯಾಕೇಜ್ ಮ್ಯಾನೇಜರ್) ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ಗಾಗಿ ಪ್ಯಾಕೇಜ್ ಮ್ಯಾನೇಜರ್ ಆಗಿದ್ದು ಅದು ಡೆವಲಪರ್‌ಗಳಿಗೆ ತಮ್ಮ ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗಾಗಿ ಪ್ಯಾಕೇಜ್‌ಗಳನ್ನು ಸುಲಭವಾಗಿ ಸ್ಥಾಪಿಸಲು, ನವೀಕರಿಸಲು ಮತ್ತು ನಿರ್ವಹಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಇದು ರಿಯಾಕ್ಟ್ ರೂಟರ್ ಲೈಬ್ರರಿಗೆ ಡೀಫಾಲ್ಟ್ ಪ್ಯಾಕೇಜ್ ಮ್ಯಾನೇಜರ್ ಆಗಿದೆ ಮತ್ತು ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಬಳಸಬಹುದಾದ ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ಪ್ಯಾಕೇಜ್‌ಗಳಿಗೆ ಪ್ರವೇಶವನ್ನು ಒದಗಿಸುತ್ತದೆ. NPM ಡೆವಲಪರ್‌ಗಳಿಗೆ ಅಧಿಕೃತ ರಿಜಿಸ್ಟ್ರಿ ಮತ್ತು ಇತರ ಮೂರನೇ ವ್ಯಕ್ತಿಯ ಮೂಲಗಳಿಂದ ಪ್ಯಾಕೇಜ್‌ಗಳನ್ನು ತ್ವರಿತವಾಗಿ ಹುಡುಕಲು ಮತ್ತು ಸ್ಥಾಪಿಸಲು ಅನುಮತಿಸುತ್ತದೆ. ಇದು ವಿಭಿನ್ನ ಪ್ಯಾಕೇಜ್‌ಗಳ ನಡುವೆ ಅವಲಂಬನೆಗಳನ್ನು ನಿರ್ವಹಿಸುವ ಸಾಧನಗಳನ್ನು ಸಹ ಒದಗಿಸುತ್ತದೆ, ಇದು ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ಪ್ರತಿ ಪ್ಯಾಕೇಜ್‌ನ ಯಾವ ಆವೃತ್ತಿಗಳನ್ನು ಸ್ಥಾಪಿಸಲಾಗಿದೆ ಎಂಬುದನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಲು ಸುಲಭವಾಗುತ್ತದೆ. ಹೆಚ್ಚುವರಿಯಾಗಿ, ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಪ್ಯಾಕೇಜುಗಳನ್ನು ಸುಲಭವಾಗಿ ನವೀಕರಿಸಲು ಅಥವಾ ಅವುಗಳು ಇನ್ನು ಮುಂದೆ ಅಗತ್ಯವಿಲ್ಲದಿದ್ದರೆ ಅವುಗಳನ್ನು ಅಸ್ಥಾಪಿಸಲು NPM ಅನ್ನು ಬಳಸಬಹುದು.

ರಿಯಾಕ್ಟ್ ರೂಟರ್ ಡಾಮ್ ಎಂದರೇನು

ರಿಯಾಕ್ಟ್ ರೂಟರ್ DOM ಎಂಬುದು ರಿಯಾಕ್ಟ್‌ಗಾಗಿ ರೂಟಿಂಗ್ ಲೈಬ್ರರಿಯಾಗಿದ್ದು, ಡೆವಲಪರ್‌ಗಳು ತಮ್ಮ ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಮಾರ್ಗಗಳನ್ನು ರಚಿಸಲು ಮತ್ತು ನಿರ್ವಹಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಘಟಕಗಳಿಗೆ ಮಾರ್ಗಗಳನ್ನು ಘೋಷಣಾತ್ಮಕವಾಗಿ ನಕ್ಷೆ ಮಾಡಲು, ಬ್ರೌಸರ್‌ನ ಇತಿಹಾಸವನ್ನು ನಿರ್ವಹಿಸಲು ಮತ್ತು URL ನೊಂದಿಗೆ UI ಅನ್ನು ಸಿಂಕ್‌ನಲ್ಲಿ ಇರಿಸಿಕೊಳ್ಳಲು ಇದು ಒಂದು ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇದು ಡೈನಾಮಿಕ್ ಮಾರ್ಗ ಹೊಂದಾಣಿಕೆ, ಸ್ಥಳ ಪರಿವರ್ತನೆ ನಿರ್ವಹಣೆ ಮತ್ತು URL ಉತ್ಪಾದನೆಯಂತಹ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಸಹ ಒಳಗೊಂಡಿದೆ.

Dom npm ರಿಯಾಕ್ಟ್ ರೂಟರ್ ಅನ್ನು ಹೇಗೆ ಸ್ಥಾಪಿಸುವುದು

1. ರಿಯಾಕ್ಟ್ ರೂಟರ್ ಅನ್ನು ಸ್ಥಾಪಿಸಿ:
ಮೊದಲು, npm ಅಥವಾ ನೂಲು ಬಳಸಿ ರಿಯಾಕ್ಟ್ ರೂಟರ್ ಪ್ಯಾಕೇಜ್ ಅನ್ನು ಸ್ಥಾಪಿಸಿ.
ಉದಾಹರಣೆಗೆ, ನೀವು npm ಬಳಸುತ್ತಿದ್ದರೆ:
npm ಅನುಸ್ಥಾಪಿಸಲು react-router-dom

2. ಆಮದು ರಿಯಾಕ್ಟ್ ರೂಟರ್:
ಅನುಸ್ಥಾಪನೆಯು ಪೂರ್ಣಗೊಂಡ ನಂತರ, ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ಗೆ ನೀವು ರಿಯಾಕ್ಟ್-ರೂಟರ್-ಡಾಮ್‌ನಿಂದ ಘಟಕಗಳನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳಬೇಕು. ಉದಾಹರಣೆಗೆ:
{BrowserRouter ಅನ್ನು ರೂಟರ್ ಆಗಿ ಆಮದು ಮಾಡಿ, ಮಾರ್ಗ } ಅನ್ನು 'react-router-dom' ನಿಂದ;

3. ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ರೂಟರ್ ಕಾಂಪೊನೆಂಟ್‌ನಲ್ಲಿ ಸುತ್ತಿ:
ಮುಂದಿನ ಹಂತವು ನಿಮ್ಮ ಮೂಲ ಘಟಕವನ್ನು a ನೊಂದಿಗೆ ಸುತ್ತುವುದು ರಿಯಾಕ್ಟ್-ರೂಟರ್-ಡಾಮ್‌ನಿಂದ ಘಟಕ. ಇದು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ಗೆ ರೂಟಿಂಗ್ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ ಮತ್ತು ಬಳಕೆದಾರರು ಭೇಟಿ ನೀಡುತ್ತಿರುವ ಪ್ರಸ್ತುತ URL ಮಾರ್ಗದ ಬಗ್ಗೆ ಅರಿವು ಮೂಡಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ:

const ಅಪ್ಲಿಕೇಶನ್ = () => (
 
 

    );

4. ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ಗೆ ಮಾರ್ಗಗಳನ್ನು ಸೇರಿಸಿ: ಅಂತಿಮ ಹಂತವನ್ನು ಬಳಸಿಕೊಂಡು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ಗೆ ಮಾರ್ಗಗಳನ್ನು ಸೇರಿಸುವುದು ರಿಯಾಕ್ಟ್ ರೂಟರ್ ಡೊಮ್ ಮೂಲಕ ಒದಗಿಸಿದ ಘಟಕ. ಮಾರ್ಗದ ಘಟಕವು ಎರಡು ಆಧಾರಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ; ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ಬಳಕೆದಾರರು ನಿರ್ದಿಷ್ಟ URL ಮಾರ್ಗವನ್ನು ಭೇಟಿ ಮಾಡಿದಾಗ ಯಾವ ಘಟಕಗಳನ್ನು ಸಲ್ಲಿಸಬೇಕು ಎಂಬುದನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುವ ಮಾರ್ಗ ಮತ್ತು ಘಟಕ ಉದಾಹರಣೆಗೆ:

const ಅಪ್ಲಿಕೇಶನ್ = () => (
 
 

   )