[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-related-none":3,"blog-likes-none":4,"blog-comments-none":7,"explore-nav":8,"blog-post-what-is-react-router-and-how-to-use-it-part-1":135},[],{"count":5,"likedByMe":6},0,false,[],{"categories":9},[10,32,49,84,101,118],{"id":11,"title":12,"slug":13,"courses":14},"e9a4d03c-fbd0-4e55-93b9-ed4a46b94e36","Artificial Intelligence","artificial-intelligence",[15,21,27],{"id":16,"slug":17,"title":18,"thumbnailUrl":19,"excerpt":20},"cacc8fe7-6291-407b-bddc-3f7de5023546","programming-using-ai-in-marathi","AI वापरून प्रोग्रामिंग आणि वेब अप्लिकेशन बनवणे","https:\u002F\u002Fclickskills-students-files.b-cdn.net\u002Fcourse-thumbnails\u002F1782717919191-b0850aa16ba1.webp","AI वापरून प्रोग्रामिंग शिका आणि वेब अप्लिकेशन सुद्धा बनवा!",{"id":22,"slug":23,"title":24,"thumbnailUrl":25,"excerpt":26},"2f7ef75a-befe-4084-b40b-221191b64baf","data-science-in-marathi","AI, मशीन लर्निंग आणि डेटा सायन्स मराठी मध्ये","https:\u002F\u002Fclickskills-students-files.b-cdn.net\u002Fcourse-thumbnails\u002F1782197445514-4d593c0d1918.webp","शिकूया डेटा सायन्स मराठी मधून (Learn Data Science in Marathi)",{"id":28,"slug":29,"title":30,"thumbnailUrl":31,"excerpt":30},"55e20b7e-3220-4448-bf54-4cecce6b7a07","gen-ai-rft-race-framework","Gen AI चे बेसिक्स: RFT आणि RACE Framework","https:\u002F\u002Fclickskills-students-files.b-cdn.net\u002Fcourse-thumbnails\u002F1783710275986-e5ec22e4ce73.png",{"id":33,"title":34,"slug":35,"courses":36},"e4c99897-4585-49b6-bcd6-addfd022fd19","Backend Development","backend-development",[37,43],{"id":38,"slug":39,"title":40,"thumbnailUrl":41,"excerpt":42},"564ebd4e-fb20-4b07-88fb-e021c48b7148","learn-sql-and-database-management-in-marathi","SQL आणि डेटाबेस मॅनेजमेंट","https:\u002F\u002Fclickskills-students-files.b-cdn.net\u002Fcourse-thumbnails\u002F1782364800303-1959e635957c.webp","शिकूया SQL मराठी मधून",{"id":44,"slug":45,"title":46,"thumbnailUrl":47,"excerpt":48},"f369f586-079d-4429-a748-3a9ade790bec","start-learning-python-in-marathi","शिकूया पायथन लँग्वेज","https:\u002F\u002Fclickskills-students-files.b-cdn.net\u002Fcourse-thumbnails\u002F1783711892649-55927d19879b.png","आता पायथन शिकूया ते पण मराठी मध्ये",{"id":50,"title":51,"slug":52,"courses":53},"5d3de577-8678-4e89-ace9-ca2b18ebc8d4","Digital Marketing","digital-marketing",[54,60,66,72,78],{"id":55,"slug":56,"title":57,"thumbnailUrl":58,"excerpt":59},"8244002f-1f30-4552-ab50-d2d26a0bd437","create-professional-designs-using-ai","Create Professional Designs Using AI- AI च्या मदतीने आकर्षक डिझाइन्स तयार करा","https:\u002F\u002Fclickskills-students-files.b-cdn.net\u002Fcourse-thumbnails\u002F1783690826637-b30c77f817fd.png","मोबाईलवर Canva आणि AI वापरून प्रोफेशनल डिझाईन शिका",{"id":61,"slug":62,"title":63,"thumbnailUrl":64,"excerpt":65},"2b1c0d32-fef1-41ec-a562-de451b3010fa","linkedin-ceo-framework-in-marathi","LinkedIn बेसिक्स: CEO फ्रेमवर्क आणि प्रोफेशनल ब्रँडिंग","https:\u002F\u002Fclickskills-students-files.b-cdn.net\u002Fcourse-thumbnails\u002F1783709004790-6297d85b64ec.png","लिंक्डइनचे बेसिक्स: CEO फ्रेमवर्क आणि प्रोफेशनल ब्रँडिंग",{"id":67,"slug":68,"title":69,"thumbnailUrl":70,"excerpt":71},"0f0bc7a9-b95d-4894-afa3-817cd2caa397","instagram-mastery-marathi","इंस्टाग्राम मास्टरी","https:\u002F\u002Fclickskills-students-files.b-cdn.net\u002Fcourse-thumbnails\u002F1783709486156-4ac89e4fb224.png","इंस्टाग्राम मास्टरी: ए टू झेड मराठीत शिका आणि तुमच्या बिझनेसला गती द्या",{"id":73,"slug":74,"title":75,"thumbnailUrl":76,"excerpt":77},"662c1e85-bb54-41ec-962a-3b9a0db132ea","learn-digital-marketing-in-marathi","डिजिटल मार्केटिंग मराठी मध्ये","https:\u002F\u002Fclickskills-students-files.b-cdn.net\u002Fcourse-thumbnails\u002F1782130878614-2fc96a9b1a09.webp","शिकूया डिजिटल मार्केटिंग ते पण मराठी मध्ये",{"id":79,"slug":80,"title":81,"thumbnailUrl":82,"excerpt":83},"3b0d3229-0b29-4036-94f9-dd95994d233c","learn-graphics-designing-in-marathi","शिकूया ग्राफिक्स डिझायनिंग मराठी मधून","https:\u002F\u002Fclickskills-students-files.b-cdn.net\u002Fcourse-thumbnails\u002F1783711500396-6a23652aeac2.png","शिकूया ग्राफिक्स डिझायनिंग ते पण मराठी मधून",{"id":85,"title":86,"slug":87,"courses":88},"398040b1-4e77-45e7-b19b-46977815617f","Frontend Development","frontend-development",[89,95],{"id":90,"slug":91,"title":92,"thumbnailUrl":93,"excerpt":94},"2380d984-efb1-4266-b027-9588c47b9c6e","start-learning-javascript-in-marathi","जावास्क्रिप्टचे बेसिक","https:\u002F\u002Fclickskills-students-files.b-cdn.net\u002Fcourse-thumbnails\u002F1782122706002-bd66a6461f59.webp","जावास्क्रिप्ट मराठी मध्ये शिकूया आणि एक जावास्क्रिप्ट डेव्हलपर बनूया",{"id":96,"slug":97,"title":98,"thumbnailUrl":99,"excerpt":100},"a7e37ca5-6ae5-4037-bea0-3f794dbb1ffd","start-learning-react-in-marathi","रिऍक्ट मराठी मध्ये","https:\u002F\u002Fclickskills-students-files.b-cdn.net\u002Fcourse-thumbnails\u002F1783712708418-6fee38f68b2e.png","रिऍक्ट शिकायला चालू करा ते पण मराठी मध्ये",{"id":102,"title":103,"slug":104,"courses":105},"0df89bdb-4c77-4a15-ae11-d58811b94c43","Full Stack Development","full-stack-development",[106,112],{"id":107,"slug":108,"title":109,"thumbnailUrl":110,"excerpt":111},"3f120779-6809-401b-b1aa-9d3e48368724","full-stack-development-using-nodejs","फुल स्टॅक डेव्हलपमेंट Node.js","https:\u002F\u002Fclickskills-students-files.b-cdn.net\u002Fcourse-thumbnails\u002F1782368437149-1ebcfa623098.webp","शिकूया फुल स्टॅक डेव्हलपमेंट मराठी मधून",{"id":113,"slug":114,"title":115,"thumbnailUrl":116,"excerpt":117},"3db829ea-e6ff-400f-9fe5-1d91b92578d4","wordpress-mastery-marathi","वर्डप्रेस मास्टरी - मराठी","https:\u002F\u002Fclickskills-students-files.b-cdn.net\u002Fcourse-thumbnails\u002F1782194228200-b305e367c56c.webp","इंग्लिश किंवा इतर भाषेत वर्डप्रेस शिकण्यापेक्षा आता शिकूया आपल्या मातृभाषेतून",{"id":119,"title":120,"slug":121,"courses":122},"bb9e1f27-7452-44d0-9ec2-6ac3965cda10","Other","other",[123,129],{"id":124,"slug":125,"title":126,"thumbnailUrl":127,"excerpt":128},"1c9df398-475e-4424-8e62-768c43889a31","english-foundation-course-in-marathi","इंग्लिश फंडामेंटल्स","https:\u002F\u002Fclickskills-students-files.b-cdn.net\u002Fcourse-thumbnails\u002F1782365402341-5c44696d9eb5.webp","शिकूया इंग्लिश चे फंडामेंटल्स ते पण मराठी मध्ये",{"id":130,"slug":131,"title":132,"thumbnailUrl":133,"excerpt":134},"8689b5e8-50e5-40ca-8de9-5862b9873697","git-and-github-mastery-in-marathi","गिट आणि गिटहब मास्टरी","https:\u002F\u002Fclickskills-students-files.b-cdn.net\u002Fcourse-thumbnails\u002F1782717282725-168604971ed2.webp","Git आणि GitHub: प्रोजेक्ट व्यवस्थापनासाठी पूर्ण मार्गदर्शक",{"id":136,"createdAt":137,"updatedAt":137,"deletedAt":138,"title":139,"slug":140,"content":141,"excerpt":142,"status":143,"publishedDate":138,"featuredImage":138,"metaDescription":144,"viewCount":5,"authorId":145,"categoryId":157,"tagIds":163},"dfb5b125-b064-4960-8556-d42c4fac5607","2026-07-03T12:06:08.899Z",null,"रिऍक्ट राउटरच काय आहे? आणि ते कसे वापरायचे? भाग १","what-is-react-router-and-how-to-use-it-part-1","\u003Cp>कुठलीही वेबसाईट म्हटली कि तिथे एका पेज वरून दुसऱ्या पेज वर जावंच लागत. मग त्यात रिऍक्ट मध्ये बनलेले ऍप पण आलेच.आपण एखादी साधी स्टॅटिक वेबसाईट बनवतो ज्यामध्ये आपण HTML, CSS आणि जावास्क्रिप्ट वापरतो त्यामध्ये ज्या काही HTML फाईल आपण बनवतो त्या सगळ्या फाईल वेगवेगळे पेज म्हणून काम करतात.\u003C\u002Fp>\u003Ch2>पण रिऍक्ट मध्ये कॉम्पोनन्ट बेस्ड आर्किटेक्चर वापरले जाते. आणि इथे वेगवेगळया HTML फाईल नसतात.\u003C\u002Fh2>\u003Cp>पण मग एका पेज वरून दुसरी कडे कसे जायचे?तर त्यासाठीच आपल्याला एक थर्ड पार्टी लायब्ररी वापरावी लागते.\u003C\u002Fp>\u003Cp>आणि इथेच आपल्याला रिऍक्ट राउटर हि लायब्ररी कामास येते.\u003C\u002Fp>\u003Cp>रिऍक्ट राऊटर वापरून आपण आपल्या रिऍक्ट ऍप मध्ये एका पेज वरून दुसरी कडे जाऊ शकतो.\u003C\u002Fp>\u003Cp>त्यासाठी काय कॉन्फिगरेशन लागते आणि ते कसे करायचे हे आपण या ब्लॉग मध्ये बघणार आहोत.\u003C\u002Fp>\u003Cblockquote>\u003Cp>\u003C\u002Fp>\u003C\u002Fblockquote>\u003Ch2>रिऍक्ट राउटरची प्राथमिक माहिती \u003C\u002Fh2>\u003Cp>2014 मध्ये प्रथम तयार केलेली, React Router ही रिऍक्टची declarative, कॉम्पोनन्ट बेस्ड, क्लायंट आणि सर्व्हर-साइड राउटिंग लायब्ररी आहे.\u003C\u002Fp>\u003Cp>ज्याप्रमाणे रिऍक्ट तुम्हाला अप्लिकेशन स्टेटमध्ये जोडण्यासाठी आणि अपडेट करण्यासाठी एक declarative आणि कंपोजेबल API देते, त्याचप्रमाणे रिऍक्ट राउटर तुम्हाला वापरकर्त्याला नेव्हिगेशन करण्यासाठी एक declarative आणि कंपोजेबल API देते.\u003C\u002Fp>\u003Cp>इथे कदाचित तुम्हाला असा प्रश्न पडू शकतो कि रिऍक्ट सारख्या इतक्या लोकप्रिय लायब्ररी मध्ये राऊटिंग कसे दिले नाही?\u003C\u002Fp>\u003Cp>प्रश्न अगदी बरोबर आहे.\u003C\u002Fp>\u003Cp>पण रिऍक्ट हि एक फ्रंटएन्ड लायब्ररी आहे आणि एक फ्रेमवर्क नाही.रिऍक्ट तुम्हाला सांगते कि तुम्ही कुठलीही लायब्ररी राऊंटिंग साठी वापरू शकता.\u003C\u002Fp>\u003Cp>फक्त त्या लायब्ररी ने रिऍक्टच्या मूलभूत गुणांना फाटा देता काम नये.\u003C\u002Fp>\u003Ch2>रिऍक्ट राउटर कसा वापरावा? \u003C\u002Fh2>\u003Ch3>पायरी १ \u003C\u002Fh3>\u003Cp>कुठलीही लायब्ररी वापरण्याआधी ती आपल्याला इन्स्टॉल करावी लागते. तसेच रिऍक्ट राउटर इन्स्टॉल करण्यासाठी खाली दिलेली कमांड वापरायची आहे.\u003C\u002Fp>\u003Cp>npm install react-router-dom@6\u003C\u002Fp>\u003Ch3>पायरी २ \u003C\u002Fh3>\u003Cp>तुम्हाला तुमच्या रिऍक्ट प्रोजेक्टच्या index.js या फाईल मध्ये जाऊन तुमचा ऍप कॉम्पोनन्ट तुम्हाला BrowserRoutes या कॉम्पोनन्ट मध्ये wrap करावा लागेल.\u003C\u002Fp>\u003Cp>import * as React from \"react\"; import * as ReactDOM from \"react-dom\"; import { BrowserRouter } from \"react-router-dom\"; import App from \".\u002FApp.js\"; ReactDOM.render( , document.getElementById(\"root\") );\u003C\u002Fp>\u003Ch3>पायरी ३ \u003C\u002Fh3>\u003Cp>त्यानंतर App.js या कॉम्पोनन्ट फाईल मध्ये आपण आपले रूट define करू शकतो\u003C\u002Fp>\u003Cp>import * as React from \"react\"; import { Routes, Route, Link } from \"react-router-dom\"; function App() { return (\u003C\u002Fp>\u003Ch1>Welcome to React Router!\u003C\u002Fh1>\u003Cp> ); }\u003C\u002Fp>\u003Cp>\u003C\u002Fp>\u003Cp>इथे तुम्ही बघू शकता कि Routes या component मध्ये आपण प्रत्येक रूट define केला आहे.\u003C\u002Fp>\u003Cp>\u003C\u002Fp>\u003Cp>जर वरचे वाक्य पाहिले तर आपण बघू शकतो इथे आपण path मध्ये काय लिंक असेल ते देत आहे. आणि element मध्ये कुठला कॉम्पोनन्ट त्या लिंक वर render झाला पाहिजे हे सांगत आहे.\u003C\u002Fp>\u003Cp>असे आपण किती पेजेस राऊंट्स मध्ये ऍड करू शकतो.वरचा कोड मधे एक ओळ आहे ती म्हणजे\u003C\u002Fp>\u003Cp>\u003C\u002Fp>\u003Cp>हा रूट काय करतो तर रिऍक्ट ऍप मध्ये जर एखादा पेज उपलब्ध नसेल तर ४०४ नॉट फाउंड ची एरर देतो.\u003C\u002Fp>\u003Cp>पण आता हे जे रूट define केले आहेत हे आपण कसे वापरू शकतो?कारण नुसते रूट define करून फायदा आणि तर ते वापरता पण आले पाहिजेत.तर त्यासाठी आपण रिऍक्ट कॉम्पोनन्ट मध्ये असा कोड लिहू शकतो.\u003C\u002Fp>\u003Cp>About\u003C\u002Fp>\u003Cp>तर अशा रीतीने तुम्ही रिऍक्ट राउटर तुम्ही तुमच्या अप्लिकेशन मध्ये वापरू शकता.पुढच्या भागात आपण नेस्टेड रूट्स आणि पॅरामीटर कसे पास करायचे हे बघणार आहोत.\u003C\u002Fp>","रिऍक्ट राऊटर वापरून आपण आपल्या रिऍक्ट ऍप मध्ये एका पेज वरून दुसरी कडे जाऊ शकतो. त्यासाठी काय कॉन्फिगरेशन लागते आणि ते कसे करायचे हे आपण या ब्लॉग मध्ये बघणार आहोत.","published","रिऍक्ट राऊटर वापरून आपण आपल्या रिऍक्ट ऍप मध्ये एका पेज वरून दुसरी कडे जाऊ शकतो. त्यासाठी काय कॉन्फिगरेशन लागते आणि ते कसे करायचे हे आपण या ब्लॉग मध्ये बघणार आहो",{"id":146,"createdAt":147,"updatedAt":147,"deletedAt":138,"bio":138,"avatar":138,"socialLinks":138,"user":148},"8c459424-59d8-4533-b20e-5f0e47145af8","2026-06-22T09:24:50.082Z",{"id":149,"createdAt":150,"updatedAt":150,"deletedAt":138,"name":151,"email":152,"phone":153,"password":154,"verifiedEmail":155,"roleId":156,"av":5,"oldDbId":138,"age":138,"gender":138,"state":138,"city":138,"profession":138,"signupSource":138,"linkedinUrl":138,"freeAiTrack":138,"trialConsumed":6,"isDisabled":6},"8206d696-7835-45cb-9324-0a5df2d1631c","2026-06-22T09:24:42.267Z","Prathamesh Sakhadeo","pps@clickskills.in","9823063420","$2b$10$ae8.crMuB7EQSYuNJK7cWeir8Z03SEM2EeQavIxeTw2D2eln1cijK",true,"7351bf63-8fcc-4c38-90e1-292248d06ae3",{"id":158,"createdAt":159,"updatedAt":159,"deletedAt":138,"name":160,"slug":161,"description":162},"238b9692-b429-48fc-b196-469da01ad4a4","2026-06-29T10:27:46.847Z","Technology","technology","",[]]