रिऍक्ट राउटरच काय आहे? आणि ते कसे वापरायचे? भाग १

कुठलीही वेबसाईट म्हटली कि तिथे एका पेज वरून दुसऱ्या पेज वर जावंच लागत. मग त्यात रिऍक्ट मध्ये बनलेले ऍप पण आलेच.आपण एखादी साधी स्टॅटिक वेबसाईट बनवतो ज्यामध्ये आपण HTML, CSS आणि जावास्क्रिप्ट वापरतो त्यामध्ये ज्या काही HTML फाईल आपण बनवतो त्या सगळ्या फाईल वेगवेगळे पेज म्हणून काम करतात.

पण रिऍक्ट मध्ये कॉम्पोनन्ट बेस्ड आर्किटेक्चर वापरले जाते. आणि इथे वेगवेगळया HTML फाईल नसतात.

पण मग एका पेज वरून दुसरी कडे कसे जायचे?तर त्यासाठीच आपल्याला एक थर्ड पार्टी लायब्ररी वापरावी लागते.

आणि इथेच आपल्याला रिऍक्ट राउटर हि लायब्ररी कामास येते.

रिऍक्ट राऊटर वापरून आपण आपल्या रिऍक्ट ऍप मध्ये एका पेज वरून दुसरी कडे जाऊ शकतो.

त्यासाठी काय कॉन्फिगरेशन लागते आणि ते कसे करायचे हे आपण या ब्लॉग मध्ये बघणार आहोत.

रिऍक्ट राउटर हि लायब्ररी जगातील एकूण रिऍक्ट ऍप पैकी ४४% ऍप मध्ये वापरली जाते.

रिऍक्ट राउटरची प्राथमिक माहिती 

2014 मध्ये प्रथम तयार केलेली, React Router ही रिऍक्टची declarative, कॉम्पोनन्ट बेस्ड, क्लायंट आणि सर्व्हर-साइड राउटिंग लायब्ररी आहे.

ज्याप्रमाणे रिऍक्ट तुम्हाला अप्लिकेशन स्टेटमध्ये जोडण्यासाठी आणि अपडेट करण्यासाठी एक declarative आणि कंपोजेबल API देते, त्याचप्रमाणे रिऍक्ट राउटर तुम्हाला वापरकर्त्याला नेव्हिगेशन करण्यासाठी एक declarative आणि कंपोजेबल API देते.

इथे कदाचित तुम्हाला असा प्रश्न पडू शकतो कि रिऍक्ट सारख्या इतक्या लोकप्रिय लायब्ररी मध्ये राऊटिंग कसे दिले नाही?

प्रश्न अगदी बरोबर आहे.

पण रिऍक्ट हि एक फ्रंटएन्ड लायब्ररी आहे आणि एक फ्रेमवर्क नाही.रिऍक्ट तुम्हाला सांगते कि तुम्ही कुठलीही लायब्ररी राऊंटिंग साठी वापरू शकता.

फक्त त्या लायब्ररी ने रिऍक्टच्या मूलभूत गुणांना फाटा देता काम नये.

रिऍक्ट राउटर कसा वापरावा? 

पायरी १ 

कुठलीही लायब्ररी वापरण्याआधी ती आपल्याला इन्स्टॉल करावी लागते. तसेच रिऍक्ट राउटर इन्स्टॉल करण्यासाठी खाली दिलेली कमांड वापरायची आहे.

npm install react-router-dom@6

पायरी २ 

तुम्हाला तुमच्या रिऍक्ट प्रोजेक्टच्या index.js या फाईल मध्ये जाऊन तुमचा ऍप कॉम्पोनन्ट तुम्हाला BrowserRoutes या कॉम्पोनन्ट मध्ये wrap करावा लागेल.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App.js";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

पायरी ३ 

त्यानंतर App.js या कॉम्पोनन्ट फाईल मध्ये आपण आपले रूट define करू शकतो

import * as React from "react";
import { Routes, Route, Link } from "react-router-dom";

function App() {
  return (
    <div>
      <header>
        <h1>Welcome to React Router!
      </header>
      <Routes>
        <Route path="/" element={} />
        <Route path="about" element={} />
        <Route path="/products" element={} />
        <Route path="*" element={} />
      </Routes>
    </div>
  );
}

इथे तुम्ही बघू शकता कि Routes या component मध्ये आपण प्रत्येक रूट define केला आहे.

<Route path="/" element={} />

जर वरचे वाक्य पाहिले तर आपण बघू शकतो इथे आपण path मध्ये काय लिंक असेल ते देत आहे. आणि element मध्ये कुठला कॉम्पोनन्ट त्या लिंक वर render झाला पाहिजे हे सांगत आहे.

असे आपण किती पेजेस राऊंट्स मध्ये ऍड करू शकतो.वरचा कोड मधे एक ओळ आहे ती म्हणजे

<Route path="*" element={} />

हा रूट काय करतो तर रिऍक्ट ऍप मध्ये जर एखादा पेज उपलब्ध नसेल तर ४०४ नॉट फाउंड ची एरर देतो.

पण आता हे जे रूट define केले आहेत हे आपण कसे वापरू शकतो?कारण नुसते रूट define करून फायदा आणि तर ते वापरता पण आले पाहिजेत.तर त्यासाठी आपण रिऍक्ट कॉम्पोनन्ट मध्ये असा कोड लिहू शकतो.

<Link to="/about">About</Link>

तर अशा रीतीने तुम्ही रिऍक्ट राउटर तुम्ही तुमच्या अप्लिकेशन मध्ये वापरू शकता.पुढच्या भागात आपण नेस्टेड रूट्स आणि पॅरामीटर कसे पास करायचे हे बघणार आहोत.

जर तुम्हाला रिऍक्ट काय आहे आणि ते कसे वापरायचे हे पहिल्यापासून शिकायचे असेल तर तुम्ही आपला रिऍक्ट चा कोर्स इथे क्लिक करून घेऊ शकता.