ಪರಿಹರಿಸಲಾಗಿದೆ: ರಿಯಾಕ್ಟ್ ರೂಟರ್ ಡೊಮ್ ಇಂಡೆಕ್ಸ್‌ರೀಡೈರೆಕ್ಟ್

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

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

<Router>
  <Route path="/">
    <IndexRedirect to="/home" />
    <Route path="/home" component={Home} />
    <Route path="/about" component={About} />
  </Route>  
</Router>

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

2. "” – ಈ ಸಾಲು ಎಲ್ಲಾ ಮಾರ್ಗಗಳನ್ನು ರೂಟರ್ ಘಟಕದಲ್ಲಿ ಸುತ್ತುತ್ತದೆ, ಇದನ್ನು ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಾಗಿ ರೂಟಿಂಗ್ ಅನ್ನು ಹೊಂದಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ.

3. "” – ಈ ಸಾಲು '/' ಮಾರ್ಗದೊಂದಿಗೆ ಮಾರ್ಗವನ್ನು ಹೊಂದಿಸುತ್ತದೆ. ಈ ಮಾರ್ಗದ ಯಾವುದೇ ವಿನಂತಿಗಳನ್ನು ಈ ಮಾರ್ಗದ ಮೂಲಕ ನಿರ್ವಹಿಸಲಾಗುತ್ತದೆ.

4. "” – ಈ ಸಾಲು ಯಾವುದೇ ವಿನಂತಿಗಳನ್ನು '/' ಮಾರ್ಗಕ್ಕೆ '/home' ಗೆ ಮರುನಿರ್ದೇಶಿಸುತ್ತದೆ.

5. "” – ಈ ಸಾಲು '/ಹೋಮ್' ಮಾರ್ಗದೊಂದಿಗೆ ಮಾರ್ಗವನ್ನು ಹೊಂದಿಸುತ್ತದೆ. ಈ ಮಾರ್ಗಕ್ಕೆ ಯಾವುದೇ ವಿನಂತಿಗಳನ್ನು ಹೋಮ್ ಕಾಂಪೊನೆಂಟ್ ಮೂಲಕ ನಿರ್ವಹಿಸಲಾಗುತ್ತದೆ, ಇದು ರೂಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗೆ ಆರ್ಗ್ಯುಮೆಂಟ್ ಆಗಿ ರವಾನಿಸಲ್ಪಡುತ್ತದೆ.

6. "” – ಈ ಸಾಲು '/about' ಮಾರ್ಗದೊಂದಿಗೆ ಮಾರ್ಗವನ್ನು ಹೊಂದಿಸುತ್ತದೆ. ಈ ಮಾರ್ಗಕ್ಕೆ ಯಾವುದೇ ವಿನಂತಿಗಳನ್ನು ರೂಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗೆ ಆರ್ಗ್ಯುಮೆಂಟ್ ಆಗಿ ರವಾನಿಸಲಾದ ಬಗ್ಗೆ ಘಟಕದಿಂದ ನಿರ್ವಹಿಸಲಾಗುತ್ತದೆ.

7."" & "" - ಈ ಸಾಲುಗಳು ಕ್ರಮವಾಗಿ ಮಾರ್ಗಗಳು ಮತ್ತು ರೂಟರ್ ಘಟಕಗಳನ್ನು ಮುಚ್ಚುತ್ತವೆ

IndexRedirect ಎಂದರೇನು

IndexRedirect ಎನ್ನುವುದು ರಿಯಾಕ್ಟ್ ರೂಟರ್‌ನಲ್ಲಿನ ಒಂದು ಅಂಶವಾಗಿದ್ದು ಅದು ನಿಮ್ಮನ್ನು ಒಂದು ಮಾರ್ಗದಿಂದ ಇನ್ನೊಂದು ಮಾರ್ಗಕ್ಕೆ ಮರುನಿರ್ದೇಶಿಸಲು ಅನುಮತಿಸುತ್ತದೆ. ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಮೂಲ URL ನಿಂದ ಬಳಕೆದಾರರನ್ನು ಮತ್ತೊಂದು ಮಾರ್ಗಕ್ಕೆ ಮರುನಿರ್ದೇಶಿಸಲು ನೀವು ಬಯಸಿದಾಗ ಇದನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ನೀವು "/" ನ ರೂಟ್ URL ನೊಂದಿಗೆ ಅಪ್ಲಿಕೇಶನ್ ಹೊಂದಿದ್ದರೆ, ಬಳಕೆದಾರರು ರೂಟ್ URL ಗೆ ಭೇಟಿ ನೀಡಿದಾಗ "/home" ಗೆ ಮರುನಿರ್ದೇಶಿಸಲು ನೀವು IndexRedirect ಅನ್ನು ಬಳಸಬಹುದು.

IndexRedirect ಮಾಡುವುದು ಹೇಗೆ

React Router ನಲ್ಲಿ IndexRedirect ಎನ್ನುವುದು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಮೂಲ URL ನಿಂದ ಮತ್ತೊಂದು URL ಗೆ ಬಳಕೆದಾರರನ್ನು ಮರುನಿರ್ದೇಶಿಸುವ ಒಂದು ಮಾರ್ಗವಾಗಿದೆ. ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಪ್ರಮುಖ ಪುಟಕ್ಕೆ ಬಳಕೆದಾರರನ್ನು ನಿರ್ದೇಶಿಸಲು ಅಥವಾ ಲ್ಯಾಂಡಿಂಗ್ ಪುಟವನ್ನು ರಚಿಸಲು ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ.

ರಿಯಾಕ್ಟ್ ರೂಟರ್‌ನಲ್ಲಿ ಇಂಡೆಕ್ಸ್‌ರೀಡೈರೆಕ್ಟ್ ಮಾಡಲು, ನೀವು ಇದನ್ನು ಬಳಸಬೇಕಾಗುತ್ತದೆ ಘಟಕ. ಈ ಘಟಕವು ಎರಡು ರಂಗಪರಿಕರಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ: "ಟು" ಮತ್ತು "ಪುಶ್". ಬಳಕೆದಾರರನ್ನು ಮರುನಿರ್ದೇಶಿಸಬೇಕೆಂದು ನೀವು ಬಯಸುವ URL ಅನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು "ಟು" ಪ್ರಾಪ್ ಅನ್ನು ಬಳಸಲಾಗುತ್ತದೆ, ಆದರೆ "ಪುಶ್" ಪ್ರಾಪ್ ಈ ಮರುನಿರ್ದೇಶನ ಸಂಭವಿಸಿದಾಗ ಬ್ರೌಸರ್ ಇತಿಹಾಸವನ್ನು ನವೀಕರಿಸಬೇಕೆ ಅಥವಾ ಬೇಡವೇ ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ (ಡೀಫಾಲ್ಟ್ ಆಗಿ ನಿಜ).

ಉದಾಹರಣೆಗೆ, ನಿಮ್ಮ ಮೂಲ URL (ಉದಾ, www.example.com) ಅನ್ನು ಭೇಟಿ ಮಾಡುವ ಬಳಕೆದಾರರನ್ನು www.example.com/home ಗೆ ಮರುನಿರ್ದೇಶಿಸಬೇಕೆಂದು ನೀವು ಬಯಸಿದರೆ, ನೀವು ಈ ರೀತಿಯ IndexRedirect ಅನ್ನು ಬಳಸಬಹುದು:




… ಇತರೆ ಮಾರ್ಗಗಳು…

ಸಂಬಂಧಿತ ಪೋಸ್ಟ್ಗಳು:

ಒಂದು ಕಮೆಂಟನ್ನು ಬಿಡಿ