ರಿಯಾಕ್ಟ್ ರೂಟರ್ v6: ಆಧುನಿಕ ವೆಬ್ ಆಪ್‌ಗಳಿಗಾಗಿ ನ್ಯಾವಿಗೇಷನ್ ಪ್ಯಾಟರ್ನ್‌ಗಳನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವುದು

ರಿಯಾಕ್ಟ್ ರೂಟರ್ v6 ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗಾಗಿ ಒಂದು ಶಕ್ತಿಯುತ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವ ರೂಟಿಂಗ್ ಲೈಬ್ರರಿಯಾಗಿದೆ. ಇದು ಪೂರ್ಣ ಪುಟ ರೀಲೋಡ್‌ಗಳಿಲ್ಲದೆ ನ್ಯಾವಿಗೇಷನ್ ನಿರ್ವಹಿಸುವ ಮೂಲಕ ತಡೆರಹಿತ ಬಳಕೆದಾರ ಅನುಭವದೊಂದಿಗೆ ಸಿಂಗಲ್-ಪೇಜ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು (SPAs) ರಚಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಈ ಬ್ಲಾಗ್ ಪೋಸ್ಟ್ ರಿಯಾಕ್ಟ್ ರೂಟರ್ v6 ಬಳಸಿಕೊಂಡು ಅಗತ್ಯವಾದ ನ್ಯಾವಿಗೇಷನ್ ಪ್ಯಾಟರ್ನ್‌ಗಳನ್ನು ಪರಿಶೀಲಿಸುತ್ತದೆ, ದೃಢವಾದ ಮತ್ತು ಬಳಕೆದಾರ ಸ್ನೇಹಿ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಬೇಕಾದ ಜ್ಞಾನ ಮತ್ತು ಉದಾಹರಣೆಗಳನ್ನು ನಿಮಗೆ ಒದಗಿಸುತ್ತದೆ.

ರಿಯಾಕ್ಟ್ ರೂಟರ್ v6 ಮೂಲ ಪರಿಕಲ್ಪನೆಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

ನಿರ್ದಿಷ್ಟ ಪ್ಯಾಟರ್ನ್‌ಗಳನ್ನು ಪರಿಶೀಲಿಸುವ ಮೊದಲು, ಕೆಲವು ಮೂಲಭೂತ ಪರಿಕಲ್ಪನೆಗಳನ್ನು ಪುನರವಲೋಕಿಸೋಣ:

• ಡಿಕ್ಲರೇಟಿವ್ ರೂಟಿಂಗ್: ರಿಯಾಕ್ಟ್ ರೂಟರ್ ಡಿಕ್ಲರೇಟಿವ್ ವಿಧಾನವನ್ನು ಬಳಸುತ್ತದೆ, ಇದರಲ್ಲಿ ನಿಮ್ಮ ರೂಟ್‌ಗಳನ್ನು ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೀರಿ. ಇದು ನಿಮ್ಮ ರೂಟಿಂಗ್ ತರ್ಕವನ್ನು ಸ್ಪಷ್ಟ ಮತ್ತು ನಿರ್ವಹಿಸಬಲ್ಲಂತೆ ಮಾಡುತ್ತದೆ.
• ಕಾಂಪೊನೆಂಟ್‌ಗಳು: ಪ್ರಮುಖ ಕಾಂಪೊನೆಂಟ್‌ಗಳೆಂದರೆ BrowserRouter, HashRouter, MemoryRouter, Routes, ಮತ್ತು Route.
• ಹುಕ್ಸ್: ರಿಯಾಕ್ಟ್ ರೂಟರ್ ರೂಟಿಂಗ್ ಮಾಹಿತಿಯನ್ನು ಪ್ರವೇಶಿಸಲು ಮತ್ತು ನ್ಯಾವಿಗೇಷನ್ ಅನ್ನು ಕುಶಲತೆಯಿಂದ ನಿರ್ವಹಿಸಲು useNavigate, useLocation, useParams, ಮತ್ತು useRoutes ನಂತಹ ಹುಕ್ಸ್‌ಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.

1. <Routes> ಮತ್ತು <Route> ಜೊತೆ ಡಿಕ್ಲರೇಟಿವ್ ರೂಟಿಂಗ್

ರಿಯಾಕ್ಟ್ ರೂಟರ್ v6 ನ ಅಡಿಪಾಯವು ಡಿಕ್ಲರೇಟಿವ್ ರೂಟಿಂಗ್‌ನಲ್ಲಿದೆ. ನೀವು <Routes> ಮತ್ತು <Route> ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ನಿಮ್ಮ ರೂಟ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೀರಿ. <Routes> ಕಾಂಪೊನೆಂಟ್ ನಿಮ್ಮ ರೂಟ್‌ಗಳಿಗೆ ಒಂದು ಕಂಟೇನರ್ ಆಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಮತ್ತು <Route> ಕಾಂಪೊನೆಂಟ್ ಒಂದು ನಿರ್ದಿಷ್ಟ ರೂಟ್ ಅನ್ನು ಮತ್ತು ಆ ರೂಟ್ ಪ್ರಸ್ತುತ URL ಗೆ ಹೊಂದಿಕೆಯಾದಾಗ ರೆಂಡರ್ ಮಾಡಬೇಕಾದ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ.

ಉದಾಹರಣೆ: ಮೂಲಭೂತ ರೂಟ್ ಕಾನ್ಫಿಗರೇಶನ್

ಒಂದು ಸರಳ ಅಪ್ಲಿಕೇಶನ್‌ಗಾಗಿ ರೂಟ್‌ಗಳನ್ನು ಸ್ಥಾಪಿಸುವ ಮೂಲಭೂತ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ:

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";

function App() {
  return (
    
      
        } />
        } />
        } />
      
    
  );
}

export default App;

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು ಮೂರು ರೂಟ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೇವೆ:

• /: Home ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತದೆ.
• /about: About ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತದೆ.
• /contact: Contact ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತದೆ.

BrowserRouter ಕಾಂಪೊನೆಂಟ್ ಬ್ರೌಸರ್ ಹಿಸ್ಟರಿ-ಆಧಾರಿತ ರೂಟಿಂಗ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. ರಿಯಾಕ್ಟ್ ರೂಟರ್ ಪ್ರಸ್ತುತ URL ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ರೂಟ್‌ಗಳೊಂದಿಗೆ ಹೋಲಿಸಿ, ಸಂಬಂಧಿತ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತದೆ.

2. URL ಪ್ಯಾರಾಮೀಟರ್‌ಗಳೊಂದಿಗೆ ಡೈನಾಮಿಕ್ ರೂಟ್‌ಗಳು

ಡೈನಾಮಿಕ್ ರೂಟ್‌ಗಳು URL ನಲ್ಲಿ ವಿಭಿನ್ನ ಮೌಲ್ಯಗಳನ್ನು ನಿಭಾಯಿಸಬಲ್ಲ ರೂಟ್‌ಗಳನ್ನು ರಚಿಸಲು ನಿಮಗೆ ಅವಕಾಶ ಮಾಡಿಕೊಡುತ್ತವೆ. ಉತ್ಪನ್ನ ಐಡಿ ಅಥವಾ ಬಳಕೆದಾರ ಐಡಿಯಂತಹ ಅನನ್ಯ ಗುರುತಿಸುವಿಕೆಯ ಆಧಾರದ ಮೇಲೆ ವಿಷಯವನ್ನು ಪ್ರದರ್ಶಿಸಲು ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ. ರಿಯಾಕ್ಟ್ ರೂಟರ್ v6 URL ಪ್ಯಾರಾಮೀಟರ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು : ಚಿಹ್ನೆಯನ್ನು ಬಳಸುತ್ತದೆ.

ಉದಾಹರಣೆ: ಉತ್ಪನ್ನದ ವಿವರಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವುದು

ನೀವು ಇ-ಕಾಮರ್ಸ್ ಅಪ್ಲಿಕೇಶನ್ ಹೊಂದಿದ್ದೀರಿ ಮತ್ತು ಪ್ರತಿ ಉತ್ಪನ್ನದ ವಿವರಗಳನ್ನು ಅದರ ID ಆಧರಿಸಿ ಪ್ರದರ್ಶಿಸಲು ಬಯಸುತ್ತೀರಿ ಎಂದು ಭಾವಿಸೋಣ. ನೀವು ಈ ರೀತಿ ಡೈನಾಮಿಕ್ ರೂಟ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು:

import { BrowserRouter, Routes, Route, useParams } from "react-router-dom";

function ProductDetails() {
  const { productId } = useParams();

  // productId ಆಧರಿಸಿ ಉತ್ಪನ್ನದ ವಿವರಗಳನ್ನು ಪಡೆದುಕೊಳ್ಳಿ
  // ...

  return (
    

      
ಉತ್ಪನ್ನದ ವಿವರಗಳು
      
ಉತ್ಪನ್ನ ಐಡಿ: {productId}
      {/* ಉತ್ಪನ್ನದ ವಿವರಗಳನ್ನು ಇಲ್ಲಿ ಪ್ರದರ್ಶಿಸಿ */}
    
  );
}

function App() {
  return (
    
      
        } />
      
    
  );
}

export default App;

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ:

• /products/:productId ಒಂದು ಡೈನಾಮಿಕ್ ರೂಟ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ, ಇದರಲ್ಲಿ :productId ಒಂದು URL ಪ್ಯಾರಾಮೀಟರ್ ಆಗಿದೆ.
• ProductDetails ಕಾಂಪೊನೆಂಟ್‌ನೊಳಗೆ productId ಪ್ಯಾರಾಮೀಟರ್‌ನ ಮೌಲ್ಯವನ್ನು ಪ್ರವೇಶಿಸಲು useParams ಹುಕ್ ಅನ್ನು ಬಳಸಲಾಗುತ್ತದೆ.
• ನಂತರ ನೀವು ನಿಮ್ಮ ಡೇಟಾ ಮೂಲದಿಂದ ಸಂಬಂಧಿತ ಉತ್ಪನ್ನದ ವಿವರಗಳನ್ನು ಪಡೆದುಕೊಳ್ಳಲು productId ಅನ್ನು ಬಳಸಬಹುದು.

ಅಂತಾರಾಷ್ಟ್ರೀಕರಣದ ಉದಾಹರಣೆ: ಭಾಷೆಯ ಕೋಡ್‌ಗಳನ್ನು ನಿಭಾಯಿಸುವುದು

ಬಹುಭಾಷಾ ವೆಬ್‌ಸೈಟ್‌ಗಾಗಿ, ಭಾಷೆಯ ಕೋಡ್‌ಗಳನ್ನು ನಿಭಾಯಿಸಲು ನೀವು ಡೈನಾಮಿಕ್ ರೂಟ್ ಅನ್ನು ಬಳಸಬಹುದು:

} />

ಈ ರೂಟ್ /en/about, /fr/about, ಮತ್ತು /es/about ನಂತಹ URLಗಳಿಗೆ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆ. ನಂತರ lang ಪ್ಯಾರಾಮೀಟರ್ ಅನ್ನು ಸೂಕ್ತ ಭಾಷೆಯ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಲೋಡ್ ಮಾಡಲು ಬಳಸಬಹುದು.

3. useNavigate ಜೊತೆಗೆ ಪ್ರೋಗ್ರಾಮ್ಯಾಟಿಕ್ ನ್ಯಾವಿಗೇಷನ್

ಸ್ಥಿರ ಲಿಂಕ್‌ಗಳಿಗೆ ಡಿಕ್ಲರೇಟಿವ್ ರೂಟಿಂಗ್ ಉತ್ತಮವಾಗಿದ್ದರೂ, ಬಳಕೆದಾರರ ಕ್ರಿಯೆಗಳು ಅಥವಾ ಅಪ್ಲಿಕೇಶನ್ ತರ್ಕದ ಆಧಾರದ ಮೇಲೆ ನೀವು ಪ್ರೋಗ್ರಾಮ್ಯಾಟಿಕ್ ಆಗಿ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಬೇಕಾಗುತ್ತದೆ. ರಿಯಾಕ್ಟ್ ರೂಟರ್ v6 ಈ ಉದ್ದೇಶಕ್ಕಾಗಿ useNavigate ಹುಕ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ. useNavigate ನಿಮಗೆ ವಿವಿಧ ರೂಟ್‌ಗಳಿಗೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಲು ಅನುಮತಿಸುವ ಒಂದು ಫಂಕ್ಷನ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ.

ಉದಾಹರಣೆ: ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಯ ನಂತರ ಮರುನಿರ್ದೇಶಿಸುವುದು

ನೀವು ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆ ಹೊಂದಿದ್ದೀರಿ ಮತ್ತು ಫಾರ್ಮ್ ಯಶಸ್ವಿಯಾಗಿ ಸಲ್ಲಿಸಿದ ನಂತರ ಬಳಕೆದಾರರನ್ನು ಯಶಸ್ಸಿನ ಪುಟಕ್ಕೆ ಮರುನಿರ್ದೇಶಿಸಲು ಬಯಸುತ್ತೀರಿ ಎಂದು ಭಾವಿಸೋಣ:

import { useNavigate } from "react-router-dom";

function MyForm() {
  const navigate = useNavigate();

  const handleSubmit = async (event) => {
    event.preventDefault();

    // ಫಾರ್ಮ್ ಡೇಟಾವನ್ನು ಸಲ್ಲಿಸಿ
    // ...

    // ಯಶಸ್ವಿ ಸಲ್ಲಿಕೆಯ ನಂತರ ಯಶಸ್ಸಿನ ಪುಟಕ್ಕೆ ಮರುನಿರ್ದೇಶಿಸಿ
    navigate("/success");
  };

  return (
    

      {/* ಫಾರ್ಮ್ ಫೀಲ್ಡ್‌ಗಳು */}
      ಸಲ್ಲಿಸಿ
    
  );
}

export default MyForm;

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ:

• navigate ಫಂಕ್ಷನ್ ಪಡೆಯಲು ನಾವು useNavigate ಹುಕ್ ಅನ್ನು ಬಳಸುತ್ತೇವೆ.
• ಫಾರ್ಮ್ ಯಶಸ್ವಿಯಾಗಿ ಸಲ್ಲಿಸಿದ ನಂತರ, ಬಳಕೆದಾರರನ್ನು /success ರೂಟ್‌ಗೆ ಮರುನಿರ್ದೇಶಿಸಲು ನಾವು navigate("/success") ಎಂದು ಕರೆಯುತ್ತೇವೆ.

ನ್ಯಾವಿಗೇಷನ್ ಸಮಯದಲ್ಲಿ ಸ್ಟೇಟ್ ಅನ್ನು ಕಳುಹಿಸುವುದು

navigate ಫಂಕ್ಷನ್‌ಗೆ ಎರಡನೇ ಆರ್ಗ್ಯುಮೆಂಟ್ ಬಳಸಿ ನೀವು ನ್ಯಾವಿಗೇಷನ್ ಜೊತೆಗೆ ಸ್ಟೇಟ್ ಅನ್ನು ಸಹ ಕಳುಹಿಸಬಹುದು:

nVg_x_Ate("/confirmation", { state: { orderId: "12345" } });

ಇದು ನಿಮಗೆ ಟಾರ್ಗೆಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗೆ ಡೇಟಾವನ್ನು ಕಳುಹಿಸಲು ಅನುಮತಿಸುತ್ತದೆ, ಇದನ್ನು useLocation ಹುಕ್ ಬಳಸಿ ಪ್ರವೇಶಿಸಬಹುದು.

4. ನೆಸ್ಟೆಡ್ ರೂಟ್‌ಗಳು ಮತ್ತು ಲೇಔಟ್‌ಗಳು

ನೆಸ್ಟೆಡ್ ರೂಟ್‌ಗಳು ಶ್ರೇಣೀಕೃತ ರೂಟಿಂಗ್ ರಚನೆಗಳನ್ನು ರಚಿಸಲು ನಿಮಗೆ ಅವಕಾಶ ಮಾಡಿಕೊಡುತ್ತವೆ, ಇದರಲ್ಲಿ ಒಂದು ರೂಟ್ ಇನ್ನೊಂದರೊಳಗೆ ನೆಸ್ಟ್ ಆಗಿರುತ್ತದೆ. ಬಹು ಹಂತದ ನ್ಯಾವಿಗೇಷನ್ ಹೊಂದಿರುವ ಸಂಕೀರ್ಣ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಸಂಘಟಿಸಲು ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ. ಅಪ್ಲಿಕೇಶನ್‌ನ ಒಂದು ವಿಭಾಗದಾದ್ಯಂತ ಕೆಲವು UI ಅಂಶಗಳು ಸ್ಥಿರವಾಗಿ ಇರುವ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಇದು ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ಉದಾಹರಣೆ: ಬಳಕೆದಾರರ ಪ್ರೊಫೈಲ್ ವಿಭಾಗ

ನೀವು ಬಳಕೆದಾರರ ಪ್ರೊಫೈಲ್ ವಿಭಾಗವನ್ನು ಹೊಂದಿದ್ದೀರಿ, ಇದರಲ್ಲಿ ಬಳಕೆದಾರರ ಪ್ರೊಫೈಲ್ ಮಾಹಿತಿ, ಸೆಟ್ಟಿಂಗ್‌ಗಳು ಮತ್ತು ಆರ್ಡರ್‌ಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು ನೆಸ್ಟೆಡ್ ರೂಟ್‌ಗಳಿವೆ ಎಂದು ಭಾವಿಸೋಣ:

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function Profile() {
  return (
    

      
ಬಳಕೆದಾರರ ಪ್ರೊಫೈಲ್
      

        

          ಪ್ರೊಫೈಲ್ ಮಾಹಿತಿ
        
        

          ಸೆಟ್ಟಿಂಗ್‌ಗಳು
        
        

          ಆರ್ಡರ್‌ಗಳು
        
      

      
        } />
        } />
        } />
      
    
  );
}

function ProfileInformation() {
  return 
ಪ್ರೊಫೈಲ್ ಮಾಹಿತಿ ಕಾಂಪೊನೆಂಟ್
;
}

function Settings() {
  return 
ಸೆಟ್ಟಿಂಗ್ಸ್ ಕಾಂಪೊನೆಂಟ್
;
}

function Orders() {
  return 
ಆರ್ಡರ್‌ಗಳ ಕಾಂಪೊನೆಂಟ್
;
}

function App() {
  return (
    
      
        } />
      
    
  );
}

export default App;

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ:

• /profile/* ರೂಟ್ /profile ನಿಂದ ಪ್ರಾರಂಭವಾಗುವ ಯಾವುದೇ URL ಗೆ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆ.
• Profile ಕಾಂಪೊನೆಂಟ್ ನ್ಯಾವಿಗೇಷನ್ ಮೆನು ಮತ್ತು ನೆಸ್ಟೆಡ್ ರೂಟ್‌ಗಳನ್ನು ನಿಭಾಯಿಸಲು <Routes> ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತದೆ.
• ನೆಸ್ಟೆಡ್ ರೂಟ್‌ಗಳು /profile/info, /profile/settings, ಮತ್ತು /profile/orders ಗಾಗಿ ರೆಂಡರ್ ಮಾಡಬೇಕಾದ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತವೆ.

ಪೋಷಕ ರೂಟ್‌ನಲ್ಲಿರುವ * ನಿರ್ಣಾಯಕವಾಗಿದೆ; ಇದು ಪೋಷಕ ರೂಟ್ ಯಾವುದೇ ಉಪ-ಮಾರ್ಗಕ್ಕೆ ಹೊಂದಿಕೆಯಾಗಬೇಕು ಎಂದು ಸೂಚಿಸುತ್ತದೆ, ಇದರಿಂದ ನೆಸ್ಟೆಡ್ ರೂಟ್‌ಗಳು Profile ಕಾಂಪೊನೆಂಟ್‌ನೊಳಗೆ ಸರಿಯಾಗಿ ಹೊಂದಿಕೆಯಾಗುತ್ತವೆ.

5. "ನಾಟ್ ಫೌಂಡ್" (404) ದೋಷಗಳನ್ನು ನಿಭಾಯಿಸುವುದು

ಬಳಕೆದಾರರು ಅಸ್ತಿತ್ವದಲ್ಲಿಲ್ಲದ ರೂಟ್‌ಗೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಿದಾಗ ಅಂತಹ ಪ್ರಕರಣಗಳನ್ನು ನಿಭಾಯಿಸುವುದು ಅತ್ಯಗತ್ಯ. ರಿಯಾಕ್ಟ್ ರೂಟರ್ v6 ಕ್ಯಾಚ್-ಆಲ್ ರೂಟ್‌ನೊಂದಿಗೆ ಇದನ್ನು ಸುಲಭಗೊಳಿಸುತ್ತದೆ.

ಉದಾಹರಣೆ: 404 ಪುಟವನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವುದು

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function NotFound() {
  return (
    

      
404 - ನಾಟ್ ಫೌಂಡ್
      
ನೀವು ಹುಡುಕುತ್ತಿರುವ ಪುಟ ಅಸ್ತಿತ್ವದಲ್ಲಿಲ್ಲ.
      ಮುಖಪುಟಕ್ಕೆ ಹಿಂತಿರುಗಿ
    
  );
}

function App() {
  return (
    
      
        } />
        } />
        } />
      
    
  );
}

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ:

• <Route path="*" element={<NotFound />} /> ರೂಟ್ ಒಂದು ಕ್ಯಾಚ್-ಆಲ್ ರೂಟ್ ಆಗಿದ್ದು, ಇದು ಇತರ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ರೂಟ್‌ಗಳಿಗೆ ಹೊಂದಿಕೆಯಾಗದ ಯಾವುದೇ URL ಗೆ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆ.
• ಈ ರೂಟ್ ಅನ್ನು <Routes> ಕಾಂಪೊನೆಂಟ್‌ನ ಕೊನೆಯಲ್ಲಿ ಇಡುವುದು ಮುಖ್ಯವಾಗಿದೆ, ಇದರಿಂದಾಗಿ ಬೇರೆ ಯಾವುದೇ ರೂಟ್ ಹೊಂದಿಕೆಯಾಗದಿದ್ದಾಗ ಮಾತ್ರ ಇದು ಹೊಂದಿಕೆಯಾಗುತ್ತದೆ.

6. ರಿಯಾಕ್ಟ್ ರೂಟರ್ v6 ಜೊತೆಗೆ ಡೇಟಾ ಲೋಡಿಂಗ್ ತಂತ್ರಗಳು

ರಿಯಾಕ್ಟ್ ರೂಟರ್ v6 ತನ್ನ ಹಿಂದಿನ ಆವೃತ್ತಿಯಂತೆ (ರಿಯಾಕ್ಟ್ ರೂಟರ್ v5 ಜೊತೆ `useRouteMatch`) ಅಂತರ್ನಿರ್ಮಿತ ಡೇಟಾ ಲೋಡಿಂಗ್ ಯಾಂತ್ರಿಕತೆಗಳನ್ನು ಒಳಗೊಂಡಿಲ್ಲ. ಆದಾಗ್ಯೂ, ವಿವಿಧ ಡೇಟಾ ಲೋಡಿಂಗ್ ತಂತ್ರಗಳನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಕಾರ್ಯಗತಗೊಳಿಸಲು ಇದು ಉಪಕರಣಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.

ಆಯ್ಕೆ 1: ಕಾಂಪೊನೆಂಟ್‌ಗಳಲ್ಲಿ ಡೇಟಾ ಪಡೆದುಕೊಳ್ಳುವುದು

ಸರಳವಾದ ವಿಧಾನವೆಂದರೆ ರೂಟ್ ಅನ್ನು ರೆಂಡರ್ ಮಾಡುವ ಕಾಂಪೊನೆಂಟ್‌ನೊಳಗೆ ನೇರವಾಗಿ ಡೇಟಾವನ್ನು ಪಡೆದುಕೊಳ್ಳುವುದು. ಕಾಂಪೊನೆಂಟ್ ಮೌಂಟ್ ಆದಾಗ ಅಥವಾ URL ಪ್ಯಾರಾಮೀಟರ್‌ಗಳು ಬದಲಾದಾಗ ಡೇಟಾವನ್ನು ಪಡೆದುಕೊಳ್ಳಲು ನೀವು useEffect ಹುಕ್ ಅನ್ನು ಬಳಸಬಹುದು.

import { useParams } from "react-router-dom";
import { useEffect, useState } from "react";

function ProductDetails() {
  const { productId } = useParams();
  const [product, setProduct] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchProduct() {
      try {
        const response = await fetch(`/api/products/${productId}`);
        if (!response.ok) {
          throw new Error(`HTTP ದೋಷ! ಸ್ಥಿತಿ: ${response.status}`);
        }
        const data = await response.json();
        setProduct(data);
        setLoading(false);
      } catch (e) {
        setError(e);
        setLoading(false);
      }
    }

    fetchProduct();
  }, [productId]);

  if (loading) return 
ಲೋಡ್ ಆಗುತ್ತಿದೆ...
;
  if (error) return 
ದೋಷ: {error.message}
;
  if (!product) return 
ಉತ್ಪನ್ನ ಕಂಡುಬಂದಿಲ್ಲ
;

  return (
    

      
{product.name}
      
{product.description}
    
  );
}

export default ProductDetails;

ಈ ವಿಧಾನವು ನೇರವಾಗಿದೆ ಆದರೆ ನೀವು ಅನೇಕ ಕಾಂಪೊನೆಂಟ್‌ಗಳಲ್ಲಿ ಡೇಟಾವನ್ನು ಪಡೆದುಕೊಳ್ಳಬೇಕಾದರೆ ಕೋಡ್ ನಕಲು ಮಾಡಲು ಕಾರಣವಾಗಬಹುದು. ಇದು ಕಡಿಮೆ ದಕ್ಷತೆಯುಳ್ಳದ್ದಾಗಿದೆ ಏಕೆಂದರೆ ಕಾಂಪೊನೆಂಟ್ ಮೌಂಟ್ ಆದ ನಂತರವೇ ಡೇಟಾ ಪಡೆದುಕೊಳ್ಳುವಿಕೆ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ.

ಆಯ್ಕೆ 2: ಡೇಟಾ ಪಡೆದುಕೊಳ್ಳಲು ಕಸ್ಟಮ್ ಹುಕ್ ಬಳಸುವುದು

ಕೋಡ್ ನಕಲನ್ನು ಕಡಿಮೆ ಮಾಡಲು, ಡೇಟಾ ಪಡೆದುಕೊಳ್ಳುವ ತರ್ಕವನ್ನು ಒಳಗೊಂಡಿರುವ ಕಸ್ಟಮ್ ಹುಕ್ ಅನ್ನು ನೀವು ರಚಿಸಬಹುದು. ಈ ಹುಕ್ ಅನ್ನು ನಂತರ ಅನೇಕ ಕಾಂಪೊನೆಂಟ್‌ಗಳಲ್ಲಿ ಮರುಬಳಕೆ ಮಾಡಬಹುದು.

import { useState, useEffect } from "react";

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP ದೋಷ! ಸ್ಥಿತಿ: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setLoading(false);
      } catch (e) {
        setError(e);
        setLoading(false);
      }
    }

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

ನಂತರ, ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳಲ್ಲಿ ನೀವು ಈ ಹುಕ್ ಅನ್ನು ಬಳಸಬಹುದು:

import { useParams } from "react-router-dom";
import useFetch from "./useFetch";

function ProductDetails() {
  const { productId } = useParams();
  const { data: product, loading, error } = useFetch(`/api/products/${productId}`);

  if (loading) return 
ಲೋಡ್ ಆಗುತ್ತಿದೆ...
;
  if (error) return 
ದೋಷ: {error.message}
;
  if (!product) return 
ಉತ್ಪನ್ನ ಕಂಡುಬಂದಿಲ್ಲ
;

  return (
    

      
{product.name}
      
{product.description}
    
  );
}

export default ProductDetails;

ಆಯ್ಕೆ 3: ಡೇಟಾ ಪಡೆದುಕೊಳ್ಳುವ ಸಾಮರ್ಥ್ಯಗಳೊಂದಿಗೆ ರೂಟಿಂಗ್ ಲೈಬ್ರರಿ ಬಳಸುವುದು (TanStack Router, Remix)

TanStack Router ಮತ್ತು Remix ನಂತಹ ಲೈಬ್ರರಿಗಳು ರೂಟಿಂಗ್‌ನೊಂದಿಗೆ ಮನಬಂದಂತೆ ಸಂಯೋಜಿಸುವ ಅಂತರ್ನಿರ್ಮಿತ ಡೇಟಾ ಪಡೆದುಕೊಳ್ಳುವ ಯಾಂತ್ರಿಕತೆಗಳನ್ನು ನೀಡುತ್ತವೆ. ಈ ಲೈಬ್ರರಿಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಈ ರೀತಿಯ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ:

• ಲೋಡರ್‌ಗಳು: ಒಂದು ರೂಟ್ ರೆಂಡರ್ ಆಗುವ *ಮೊದಲು* ಕಾರ್ಯಗತಗೊಳ್ಳುವ ಫಂಕ್ಷನ್‌ಗಳು, ನಿಮಗೆ ಡೇಟಾವನ್ನು ಪಡೆದು ಅದನ್ನು ಕಾಂಪೊನೆಂಟ್‌ಗೆ ರವಾನಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
• ಆಕ್ಷನ್‌ಗಳು: ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಗಳು ಮತ್ತು ಡೇಟಾ ಮ್ಯುಟೇಶನ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸುವ ಫಂಕ್ಷನ್‌ಗಳು.

ಅಂತಹ ಲೈಬ್ರರಿಯನ್ನು ಬಳಸುವುದು ಡೇಟಾ ಲೋಡಿಂಗ್ ಅನ್ನು ಗಣನೀಯವಾಗಿ ಸರಳಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ವಿಶೇಷವಾಗಿ ಸಂಕೀರ್ಣ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.

ಸರ್ವರ್ ಸೈಡ್ ರೆಂಡರಿಂಗ್ (SSR) ಮತ್ತು ಸ್ಟ್ಯಾಟಿಕ್ ಸೈಟ್ ಜನರೇಷನ್ (SSG)

ಉತ್ತಮ SEO ಮತ್ತು ಆರಂಭಿಕ ಲೋಡ್ ಕಾರ್ಯಕ್ಷಮತೆಗಾಗಿ, Next.js ಅಥವಾ Gatsby ನಂತಹ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳೊಂದಿಗೆ SSR ಅಥವಾ SSG ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ. ಈ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳು ನಿಮಗೆ ಸರ್ವರ್‌ನಲ್ಲಿ ಅಥವಾ ಬಿಲ್ಡ್ ಸಮಯದಲ್ಲಿ ಡೇಟಾವನ್ನು ಪಡೆದುಕೊಳ್ಳಲು ಮತ್ತು ಪೂರ್ವ-ರೆಂಡರ್ ಮಾಡಿದ HTML ಅನ್ನು ಕ್ಲೈಂಟ್‌ಗೆ ಸರ್ವ್ ಮಾಡಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತವೆ. ಇದು ಆರಂಭಿಕ ಲೋಡ್‌ನಲ್ಲಿ ಕ್ಲೈಂಟ್ ಡೇಟಾವನ್ನು ಪಡೆದುಕೊಳ್ಳುವ ಅಗತ್ಯವನ್ನು ನಿವಾರಿಸುತ್ತದೆ, ಇದು ವೇಗವಾದ ಮತ್ತು ಹೆಚ್ಚು SEO-ಸ್ನೇಹಿ ಅನುಭವವನ್ನು ನೀಡುತ್ತದೆ.

7. ವಿವಿಧ ರೂಟರ್ ಪ್ರಕಾರಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವುದು

ರಿಯಾಕ್ಟ್ ರೂಟರ್ v6 ವಿವಿಧ ಪರಿಸರಗಳು ಮತ್ತು ಬಳಕೆಯ ಸಂದರ್ಭಗಳಿಗೆ ಸರಿಹೊಂದುವಂತೆ ವಿಭಿನ್ನ ರೂಟರ್ ಅನುಷ್ಠಾನಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ:

• BrowserRouter: ನ್ಯಾವಿಗೇಷನ್‌ಗಾಗಿ HTML5 ಹಿಸ್ಟರಿ API (pushState, replaceState) ಅನ್ನು ಬಳಸುತ್ತದೆ. ಇದು ಬ್ರೌಸರ್ ಪರಿಸರದಲ್ಲಿ ಚಾಲನೆಯಲ್ಲಿರುವ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ಅತ್ಯಂತ ಸಾಮಾನ್ಯ ಆಯ್ಕೆಯಾಗಿದೆ.
• HashRouter: ನ್ಯಾವಿಗೇಷನ್‌ಗಾಗಿ URL ನ ಹ್ಯಾಶ್ ಭಾಗವನ್ನು (#) ಬಳಸುತ್ತದೆ. ಇದು ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳನ್ನು ಬೆಂಬಲಿಸಬೇಕಾದ ಅಥವಾ HTML5 ಹಿಸ್ಟರಿ API ಅನ್ನು ಬೆಂಬಲಿಸದ ಸರ್ವರ್‌ಗಳಲ್ಲಿ ನಿಯೋಜಿಸಲಾದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ಉಪಯುಕ್ತವಾಗಿದೆ.
• MemoryRouter: ನಿಮ್ಮ "URL" ನ ಇತಿಹಾಸವನ್ನು ಮೆಮೊರಿಯಲ್ಲಿ (URLಗಳ ಅರೇ) ಇರಿಸುತ್ತದೆ. ರಿಯಾಕ್ಟ್ ನೇಟಿವ್ ಮತ್ತು ಟೆಸ್ಟಿಂಗ್ ನಂತಹ ಪರಿಸರಗಳಲ್ಲಿ ಉಪಯುಕ್ತವಾಗಿದೆ.

ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಅವಶ್ಯಕತೆಗಳು ಮತ್ತು ಪರಿಸರಕ್ಕೆ ಉತ್ತಮವಾಗಿ ಸರಿಹೊಂದುವ ರೂಟರ್ ಪ್ರಕಾರವನ್ನು ಆಯ್ಕೆ ಮಾಡಿ.

ತೀರ್ಮಾನ

ರಿಯಾಕ್ಟ್ ರೂಟರ್ v6 ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ಸಮಗ್ರ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವ ರೂಟಿಂಗ್ ಪರಿಹಾರವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಈ ಬ್ಲಾಗ್ ಪೋಸ್ಟ್‌ನಲ್ಲಿ ಚರ್ಚಿಸಲಾದ ನ್ಯಾವಿಗೇಷನ್ ಪ್ಯಾಟರ್ನ್‌ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮತ್ತು ಅನ್ವಯಿಸುವ ಮೂಲಕ, ನೀವು ದೃಢವಾದ, ಬಳಕೆದಾರ ಸ್ನೇಹಿ ಮತ್ತು ನಿರ್ವಹಿಸಬಲ್ಲ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಬಹುದು. <Routes> ಮತ್ತು <Route> ಜೊತೆಗಿನ ಡಿಕ್ಲರೇಟಿವ್ ರೂಟಿಂಗ್‌ನಿಂದ ಹಿಡಿದು URL ಪ್ಯಾರಾಮೀಟರ್‌ಗಳೊಂದಿಗೆ ಡೈನಾಮಿಕ್ ರೂಟ್‌ಗಳು, useNavigate ಜೊತೆಗಿನ ಪ್ರೋಗ್ರಾಮ್ಯಾಟಿಕ್ ನ್ಯಾವಿಗೇಷನ್ ಮತ್ತು ಪರಿಣಾಮಕಾರಿ ಡೇಟಾ ಲೋಡಿಂಗ್ ತಂತ್ರಗಳವರೆಗೆ, ರಿಯಾಕ್ಟ್ ರೂಟರ್ v6 ನಿಮ್ಮ ಬಳಕೆದಾರರಿಗೆ ತಡೆರಹಿತ ನ್ಯಾವಿಗೇಷನ್ ಅನುಭವಗಳನ್ನು ರಚಿಸಲು ನಿಮಗೆ ಅಧಿಕಾರ ನೀಡುತ್ತದೆ. ಇನ್ನಷ್ಟು ನಿಯಂತ್ರಣ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗಾಗಿ ಸುಧಾರಿತ ರೂಟಿಂಗ್ ಲೈಬ್ರರಿಗಳು ಮತ್ತು SSR/SSG ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳನ್ನು ಅನ್ವೇಷಿಸುವುದನ್ನು ಪರಿಗಣಿಸಿ. ನಿಮ್ಮ ನಿರ್ದಿಷ್ಟ ಅಪ್ಲಿಕೇಶನ್ ಅವಶ್ಯಕತೆಗಳಿಗೆ ಈ ಪ್ಯಾಟರ್ನ್‌ಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಲು ಮತ್ತು ಯಾವಾಗಲೂ ಸ್ಪಷ್ಟ ಮತ್ತು ಅರ್ಥಗರ್ಭಿತ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೆ ಆದ್ಯತೆ ನೀಡಲು ಮರೆಯದಿರಿ.