ಪರಿಹರಿಸಲಾಗಿದೆ: ರಿಯಾಕ್ಟ್ ರೂಟರ್ ಡಾಮ್ ಅನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ

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

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

ReactDOM.render(
  <Router>
    <Route path="/">
      <App />
    </Route>
  </Router>, 
  document.getElementById('root'));

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

2. “ReactDOM.render(” – ಈ ಸಾಲು ReactDOM ರೆಂಡರ್ ವಿಧಾನವನ್ನು ಕರೆದು ರಿಯಾಕ್ಟ್ ಎಲಿಮೆಂಟ್ ಅನ್ನು DOM ಗೆ ಸರಬರಾಜು ಮಾಡಿದ ಕಂಟೈನರ್‌ನಲ್ಲಿ ರೆಂಡರ್ ಮಾಡಲು ಮತ್ತು ಘಟಕಕ್ಕೆ ಉಲ್ಲೇಖವನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ (ಅಥವಾ ಸ್ಥಿತಿಯಿಲ್ಲದ ಘಟಕಗಳಿಗೆ ಶೂನ್ಯವನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ).

3. "” – ಇದು ರೂಟರ್ ಕಾಂಪೊನೆಂಟ್‌ಗಾಗಿ ಆರಂಭಿಕ ಟ್ಯಾಗ್ ಆಗಿದ್ದು, ನಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ಗೆ ರೂಟಿಂಗ್ ಕಾರ್ಯವನ್ನು ಒದಗಿಸಲು ನಮ್ಮ ಎಲ್ಲಾ ಮಾರ್ಗಗಳನ್ನು ಕಟ್ಟಲು ಇದನ್ನು ಬಳಸಲಾಗುತ್ತದೆ.

4. "” – ಇದು ರೂಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಾಗಿ ಆರಂಭಿಕ ಟ್ಯಾಗ್ ಆಗಿದ್ದು, ಇದನ್ನು ನಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ಒಂದೇ ಮಾರ್ಗವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ ಅದು '/' ನಲ್ಲಿ ಮಾಡಿದ ಯಾವುದೇ ವಿನಂತಿಗಳಿಗೆ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆ.

5. "” – ಇದು ಸ್ವಯಂ ಮುಚ್ಚುವ ಟ್ಯಾಗ್ ಆಗಿದ್ದು, ಈ ಮಾರ್ಗವು ರಿಯಾಕ್ಟ್ ರೂಟರ್ ಡೊಮ್‌ನಿಂದ ಹೊಂದಾಣಿಕೆಯಾದಾಗ ನಮ್ಮ DOM ಟ್ರೀಗೆ ಅಪ್ಲಿಕೇಶನ್ ಘಟಕವನ್ನು ಸಲ್ಲಿಸುತ್ತದೆ.
ಅಪ್ಲಿಕೇಶನ್ ಘಟಕವು ನಮ್ಮ ಕೋಡ್‌ಬೇಸ್‌ನಲ್ಲಿ ನಾವು ಬೇರೆಡೆ ವ್ಯಾಖ್ಯಾನಿಸಿರುವ ಯಾವುದೇ ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್ ಆಗಿರಬಹುದು ಅಥವಾ ಇನ್ನೊಂದು ಲೈಬ್ರರಿ ಅಥವಾ ಮೆಟೀರಿಯಲ್ UI ಅಥವಾ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಂತಹ ಪ್ಯಾಕೇಜ್‌ನಿಂದ ಆಮದು ಮಾಡಿಕೊಳ್ಳಬಹುದು…

6. “” – ಇದು ಮೇಲಿನ ಸಾಲಿನ 4 ರಲ್ಲಿ ತೆರೆಯಲಾದ ಮಾರ್ಗದ ಘಟಕಕ್ಕೆ ಮುಚ್ಚುವ ಟ್ಯಾಗ್ ಆಗಿದೆ, ಇದು ಈ ನಿರ್ದಿಷ್ಟ ಮಾರ್ಗದ ವ್ಯಾಖ್ಯಾನವನ್ನು ಮುಚ್ಚುತ್ತದೆ, ಇದರಿಂದಾಗಿ ನಮ್ಮ ಕೋಡ್‌ಬೇಸ್‌ನಲ್ಲಿ ಇದರ ಕಾರ್ಯಚಟುವಟಿಕೆ ಅಥವಾ ನಡವಳಿಕೆಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರದಂತೆ ಇತರ ಮಾರ್ಗಗಳನ್ನು ನಂತರ ಸೇರಿಸಬಹುದು .

7. “” – ಇದು ಮೇಲಿನ ಸಾಲು 3 ರಲ್ಲಿ ತೆರೆಯಲಾದ ರೂಟರ್ ಕಾಂಪೊನೆಂಟ್‌ಗೆ ಮುಚ್ಚುವ ಟ್ಯಾಗ್ ಆಗಿದೆ, ಇದು ಈ ನಿರ್ದಿಷ್ಟ ರೂಟರ್ ವ್ಯಾಖ್ಯಾನವನ್ನು ಮುಚ್ಚುತ್ತದೆ, ಇದರಿಂದಾಗಿ ಇತರ ರೂಟರ್‌ಗಳನ್ನು ನಂತರ ನಮ್ಮ ಕೋಡ್‌ಬೇಸ್‌ನಲ್ಲಿ ಇದರ ಕ್ರಿಯಾತ್ಮಕತೆ ಅಥವಾ ನಡವಳಿಕೆಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರದಂತೆ ಸೇರಿಸಬಹುದು ..

8.”document.getElementById('ರೂಟ್'));" – ಅಂತಿಮವಾಗಿ, ನಾವು ಡಾಕ್ಯುಮೆಂಟ್ getElementById ('ರೂಟ್') ಅನ್ನು ReactDOM ರೆಂಡರ್ ವಿಧಾನಕ್ಕೆ ವಾದವಾಗಿ ರವಾನಿಸುತ್ತೇವೆ ಅದು DOM ಟ್ರೀ ಒಳಗೆ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ನಿಖರವಾಗಿ ಎಲ್ಲಿ ಆರೋಹಿಸಲು/ರೆಂಡರ್ ಔಟ್ ಮಾಡಲು ಬಯಸುತ್ತದೆ ಎಂದು ಹೇಳುತ್ತದೆ (ಈ ಸಂದರ್ಭದಲ್ಲಿ id = ಹೊಂದಿರುವ ಅಂಶದ ಒಳಗೆ. ಬೇರು").

react-router-dom ಪ್ಯಾಕೇಜ್

ರಿಯಾಕ್ಟ್ ರೂಟರ್ ರಿಯಾಕ್ಟ್‌ಗಾಗಿ ಜನಪ್ರಿಯ ರೂಟಿಂಗ್ ಲೈಬ್ರರಿಯಾಗಿದೆ. ಅಪ್ಲಿಕೇಶನ್ ಮಾರ್ಗಗಳು ಮತ್ತು ನ್ಯಾವಿಗೇಷನ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು ಇದು ಶಕ್ತಿಯುತ, ಬಳಸಲು ಸುಲಭವಾದ API ಅನ್ನು ಒದಗಿಸುತ್ತದೆ. ರಿಯಾಕ್ಟ್-ರೂಟರ್-ಡಾಮ್ ಪ್ಯಾಕೇಜ್ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗಾಗಿ ರಿಯಾಕ್ಟ್ ರೂಟರ್‌ನ ಅಧಿಕೃತ ಆವೃತ್ತಿಯಾಗಿದೆ. ಇದು ಮುಂತಾದ ಘಟಕಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ ಮತ್ತು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ರೂಟಿಂಗ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು ಸಹಾಯ ಮಾಡಲು. ಇದು ನಿಮ್ಮ ಘಟಕಗಳಿಂದ ಪ್ರಸ್ತುತ ಮಾರ್ಗದ ಮಾಹಿತಿಯನ್ನು ಪ್ರವೇಶಿಸಲು useHistory, useLocation ಮತ್ತು useParams ನಂತಹ ಹುಕ್‌ಗಳನ್ನು ಸಹ ಒಳಗೊಂಡಿದೆ. ರಿಯಾಕ್ಟ್-ರೂಟರ್-ಡೊಮ್‌ನೊಂದಿಗೆ ನೀವು URL ನಿಯತಾಂಕಗಳು, ಪ್ರಶ್ನೆ ಸ್ಟ್ರಿಂಗ್‌ಗಳು ಅಥವಾ ಕಸ್ಟಮ್ ತರ್ಕವನ್ನು ಆಧರಿಸಿ ಡೈನಾಮಿಕ್ ಮಾರ್ಗಗಳನ್ನು ಸುಲಭವಾಗಿ ರಚಿಸಬಹುದು. ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ನ್ಯಾವಿಗೇಷನ್ ರಚನೆಯ ಮೇಲೆ ಹೆಚ್ಚು ಹರಳಿನ ನಿಯಂತ್ರಣವನ್ನು ಒದಗಿಸಲು ಡೈನಾಮಿಕ್ ವಿಭಾಗಗಳೊಂದಿಗೆ ನೆಸ್ಟೆಡ್ ಮಾರ್ಗಗಳನ್ನು ಸಹ ನೀವು ರಚಿಸಬಹುದು.

ರಿಯಾಕ್ಟ್ ರೂಟರ್ ಡೊಮ್ ಕೋಡ್ ಅನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡುವುದು ಹೇಗೆ ಉದಾಹರಣೆ

1. ರಿಯಾಕ್ಟ್ ರೂಟರ್ ಡೊಮ್ ಅನ್ನು ಸ್ಥಾಪಿಸಿ:
ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಡೈರೆಕ್ಟರಿಯಲ್ಲಿ, ರಿಯಾಕ್ಟ್ ರೂಟರ್ ಡೊಮ್ ಅನ್ನು ಸ್ಥಾಪಿಸಲು ಈ ಕೆಳಗಿನ ಆಜ್ಞೆಯನ್ನು ಚಲಾಯಿಸಿ:
`ಎನ್‌ಪಿಎಂ ಇನ್‌ಸ್ಟಾಲ್ ರಿಯಾಕ್ಟ್-ರೂಟರ್-ಡೋಮ್`

2. ಆಮದು ರಿಯಾಕ್ಟ್ ರೂಟರ್ ಡೊಮ್:
ಒಮ್ಮೆ ನೀವು ರಿಯಾಕ್ಟ್ ರೂಟರ್ ಡೊಮ್ ಅನ್ನು ಸ್ಥಾಪಿಸಿದ ನಂತರ, ಈ ಕೆಳಗಿನ ಕೋಡ್‌ನೊಂದಿಗೆ ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ಗೆ ನೀವು ಅದನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳಬಹುದು:
`ರಿಯಾಕ್ಟ್-ರೂಟರ್-ಡಾಮ್' ನಿಂದ {ಬ್ರೌಸರ್ ರೂಟರ್ ಅನ್ನು ರೂಟರ್ ಆಗಿ, ರೂಟ್ } ಅನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳಿ``

3. ಮಾರ್ಗ ಘಟಕವನ್ನು ರಚಿಸಿ:
ಮುಂದೆ, ಬಳಕೆದಾರರು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಮಾರ್ಗವನ್ನು ಭೇಟಿ ಮಾಡಿದಾಗ ಪುಟವನ್ನು ನಿರೂಪಿಸುವ ಮಾರ್ಗದ ಘಟಕವನ್ನು ರಚಿಸಿ. ಉದಾಹರಣೆಗೆ, ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ಯಾರಾದರೂ/ಮನೆಗೆ ಭೇಟಿ ನೀಡಿದಾಗ ನೀವು ಪುಟವನ್ನು ರೆಂಡರ್ ಮಾಡಲು ಬಯಸಿದರೆ, ನೀವು ಈ ಕೆಳಗಿನ ಕೋಡ್ ಅನ್ನು ಬಳಸಬಹುದು:
``

4. ರೂಟರ್ ಕಾಂಪೊನೆಂಟ್‌ನೊಂದಿಗೆ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಸುತ್ತಿಕೊಳ್ಳಿ:
ಅಂತಿಮವಾಗಿ, ರೂಟರ್ ಕಾಂಪೊನೆಂಟ್‌ನೊಂದಿಗೆ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಸುತ್ತಿಕೊಳ್ಳಿ ಇದರಿಂದ ನಿಮ್ಮ ಎಲ್ಲಾ ಮಾರ್ಗಗಳನ್ನು ಸರಿಯಾಗಿ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ. ನಿಮ್ಮ ರೂಟ್ ಫೈಲ್‌ನಲ್ಲಿ (ಸಾಮಾನ್ಯವಾಗಿ index.js) ಕೆಳಗಿನ ಕೋಡ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ನೀವು ಇದನ್ನು ಮಾಡಬಹುದು: ` `.