SvelteKit में रूटिंग के लिए एक गाइड

SvelteKit महान विकास अनुभव और लचीली फ़ाइल-आधारित रूटिंग के साथ सभी आकारों के वेब अनुप्रयोगों के निर्माण के लिए एक रूपरेखा है। फ्रेमवर्क सर्वर-साइड रेंडर किए गए एप्लिकेशन के त्वरित नेविगेशन के साथ सिंगल-पेज ऐप्स के एसईओ और प्रगतिशील वृद्धि लाभों को जोड़ता है। SvelteKit की महत्वपूर्ण विशेषताओं में से एक इसकी रूटिंग प्रणाली है।

SvelteKit रूटिंग को समझना

SvelteKit एक ढाँचा है स्वेल्टे के शीर्ष पर बनाया गया. SvelteKit में, रूटिंग एक फ़ाइल-आधारित प्रणाली का अनुसरण करती है। इसका मतलब यह है कि आपके पृष्ठों की निर्देशिका संरचना आपके एप्लिकेशन के मार्ग निर्धारित करती है।

SvelteKit रूटिंग सिस्टम को बेहतर ढंग से समझने के लिए, सबसे पहले, एक SvelteKit प्रोजेक्ट बनाएं। ऐसा करने के लिए, अपने टर्मिनल में निम्नलिखित कोड चलाएँ:

npm create svelte@latest my-app

उपरोक्त कोड ब्लॉक चलाने के बाद, आप अपने एप्लिकेशन को कॉन्फ़िगर करने के लिए संकेतों की एक श्रृंखला का उत्तर देंगे।

इसके बाद, अपने प्रोजेक्ट के लिए आवश्यक निर्भरताएँ स्थापित करें। यह करने के लिए सीडी अपने प्रोजेक्ट में डालें और चलाएँ:

npm install

अपने टर्मिनल में निम्नलिखित कमांड चलाकर प्रोजेक्ट को डेवलपमेंट सर्वर पर खोलें:

npm run dev

अब, आपका प्रोजेक्ट चालू हो जाएगा http://localhost: 5173/. जब आप अपने डेवलपमेंट सर्वर पर एप्लिकेशन खोलेंगे, तो आपके पास नीचे दी गई छवि के समान एक इंटरफ़ेस होगा।

परियोजना का मूल मार्ग ‘/’ नामक फ़ाइल से मेल खाता है +पेज.विस्तृत. आप पा सकते हैं +पेज.विस्तृत फ़ाइल पथ का अनुसरण करते हुए फ़ाइल; स्रोत/मार्ग आपके प्रोजेक्ट में.

SvelteKit में अलग-अलग रूट बनाने के लिए, आप अपने में फ़ोल्डर्स बना सकते हैं स्रोत/मार्ग निर्देशिका। प्रत्येक फ़ोल्डर एक अलग रूट के अनुरूप होगा. एक उत्पन्न करें +पेज.विस्तृत उस रूट की सामग्री को परिभाषित करने के लिए प्रत्येक फ़ोल्डर में फ़ाइल।

<main>
<h2> This is the about page h2>
main>

उपरोक्त कोड अंदर रहेगा +पेज फ़ाइल। आप इसके अंदर एक विस्तृत फ़ाइल बनाएंगे के बारे में फ़ोल्डर में स्रोत/मार्ग निर्देशिका। इस फ़ाइल में रूट की सामग्री होगी. अपने वेब ब्राउज़र में मार्ग देखने के लिए, नेविगेट करें http://localhost: 5173/लगभग.

पर नेविगेट किया जा रहा है /about रूट इस इंटरफ़ेस को आपकी स्क्रीन पर प्रदर्शित करेगा:

नेस्टेड रूटों को समझना

नेस्टेड रूट एक वेब एप्लिकेशन में रूटिंग सिस्टम को संरचित करने का एक तरीका है। नेस्टेड मार्ग संरचना में, मार्गों को अन्य मार्गों के भीतर रखा जाता है, जिससे उनके बीच एक पदानुक्रमित संबंध बनता है। आप SvelteKit में फ़ोल्डर्स रखकर नेस्टेड रूट बना सकते हैं +पेज.विस्तृत के अंतर्गत अन्य रूट फ़ोल्डरों के अंदर फ़ाइल करें स्रोत/मार्ग निर्देशिका।

उदाहरण के लिए:

इस उदाहरण में, आप नेस्ट करते हैं डाक के भीतर मार्ग ब्लॉग मार्ग। घोंसला बनाने के लिए डाक के भीतर मार्ग ब्लॉग मार्ग, बनाएँ डाक फ़ोल्डर और उसके +पेज.विस्तृत फ़ाइल के अंदर ब्लॉग मार्ग फ़ोल्डर.

अपने एप्लिकेशन में ब्लॉग रूट तक पहुंचने के लिए, अपना वेब ब्राउज़र खोलें और नेविगेट करें http://localhost: 5173/ब्लॉग.

पोस्ट रूट यहां उपलब्ध होगा http://localhost: 5173/ब्लॉग/पोस्ट.

लेआउट और त्रुटि मार्ग

SvelteKit एक को परिभाषित करता है नेक्स्ट.जेएस के समान तरीके से एप्लिकेशन के लिए लेआउट. दोनों ढाँचे a का उपयोग करते हैं विन्यास एप्लिकेशन की संरचना को परिभाषित करने के लिए घटक।

SvelteKit का उपयोग करता है +लेआउट.विस्तृत पृष्ठों के समूह के लिए एक लेआउट परिभाषित करने के लिए। आप एक बना सकते हैं +लेआउट.विस्तृत फ़ाइल में स्रोत/मार्ग आपके एप्लिकेशन में सभी पृष्ठों के लिए एक लेआउट परिभाषित करने के लिए निर्देशिका या पृष्ठों के एक विशिष्ट समूह के लिए एक लेआउट परिभाषित करने के लिए एक उपनिर्देशिका में।

यहां आपके संपूर्ण एप्लिकेशन के लिए लेआउट रूट को परिभाषित करने का एक उदाहरण दिया गया है:

उपरोक्त उदाहरण एक लेआउट मार्ग प्रदान करता है। फ़ाइल में एक है एच 1 वह तत्व जो पाठ प्रदर्शित करता है "यह एक SvelteKit एप्लिकेशन है।" इसमें एक भी शामिल है छेद तत्व। छेद तत्व एक विशेष तत्व है जो उस स्थान को परिभाषित करता है जहां एप्लिकेशन लेआउट के भीतर आपके मार्गों की सामग्री प्रस्तुत करेगा। यह Vue घटकों की तरह ही काम करता है.

इस स्थिति में, आपका एप्लिकेशन आपके मार्गों की सामग्री को नीचे प्रस्तुत करेगा एच 1 तत्व।

त्रुटि पृष्ठ को परिभाषित करने के लिए, नाम की एक फ़ाइल बनाएँ +त्रुटि.व्यापक में स्रोत/मार्ग निर्देशिका। रेंडरिंग के दौरान कोई त्रुटि होने पर यह पेज प्रदर्शित होगा।

उदाहरण के लिए:

जब आपको कोई त्रुटि आती है, जैसे किसी गैर-मौजूद मार्ग पर नेविगेट करना, तो आपका एप्लिकेशन इस पर वापस आ जाएगा गलती इसके बजाय मार्ग.

उदाहरण के लिए:

रास्ता http://localhost: 5173/गो मौजूद नहीं है, इसलिए एप्लिकेशन इसे प्रस्तुत करता है गलती इसके बजाय मार्ग.

पेजों के बीच नेविगेट करना

आपके द्वारा बनाए गए मार्गों के बीच नेविगेट करने का सर्वोत्तम तरीका ढूंढना एक अच्छे अनुभव के लिए महत्वपूर्ण है। परंपरागत रूप से, अधिकांश तकनीकों में फ़ाइल-आधारित रूटिंग विभिन्न पृष्ठों के बीच नेविगेट करने के लिए लिंक का उपयोग करती है। SvelteKit में पृष्ठों के बीच नेविगेट करने के लिए, आप एक साधारण HTML एंकर टैग का उपयोग कर सकते हैं।

उदाहरण के लिए, आप इस कोड को अपनी इच्छानुसार किसी भी रूट में लिख सकते हैं, लेकिन आपको इसे इसमें लिखना चाहिए विन्यास के ऊपर का मार्ग छेद टैग:

<ul>
<li>
<ahref="/">Homea>
li>
<li>
<ahref="/about">Abouta>
li>
<li>
<ahref="/blog">Bloga>
li>
<li>
<ahref="/blog/post">Posta>
li>
ul>

किसी भी एंकर टैग पर क्लिक करने से आप संबंधित मार्ग पर पहुंच जाएंगे।

SvelteKit में डायनामिक रूटिंग

डायनेमिक रूटिंग आपको डेटा या पैरामीटर के आधार पर एप्लिकेशन द्वारा जेनरेट किए जाने वाले रूटों को क्रमिक रूप से बनाने की अनुमति देता है। यह आपको लचीले और गतिशील वेब एप्लिकेशन बनाने में सक्षम बनाता है जो विभिन्न मार्गों को संभालते हैं और विशिष्ट डेटा या मापदंडों के अनुसार सामग्री प्रदर्शित करते हैं।

SvelteKit में एक डायनामिक रूट बनाने के लिए, नाम का एक फ़ोल्डर बनाएं [स्लग] और फिर ए +पेज.विस्तृत रूट की सामग्री को परिभाषित करने के लिए फ़ोल्डर में फ़ाइल करें। ध्यान दें कि आप फ़ोल्डर को जो चाहें नाम दे सकते हैं लेकिन यह सुनिश्चित करें कि नाम हमेशा कोष्ठक में ही लपेटा जाए [ ]।

यहां गतिशील मार्ग का एक उदाहरण दिया गया है:

अपने वेब ब्राउज़र में इस मार्ग तक पहुँचने के लिए, इस लिंक पर जाएँ http://localhost: 5173/[स्लग], कहाँ [स्लग] आपके द्वारा चुना गया कोई भी अद्वितीय अपरिभाषित मार्ग नाम हो सकता है।

आप अपने एप्लिकेशन तक पहुंच सकते हैं [स्लग] पैरामीटर का उपयोग कर $पेज.पैराम्स से डेटा $ऐप/स्टोर.

उदाहरण के लिए:

<scriptlang='ts'>
 import { page } from '$app/stores'
 const params = $page.params;
script>
<main>
<h1>This is the {params.slug} pageh1>
main>

यहां, आप असाइन करें $पेज.पैराम्स पर आपत्ति है परम परिवर्तनीय और प्रस्तुत करें परम.स्लग आपके एप्लिकेशन में डेटा.

एप्लिकेशन पुनः प्राप्त करता है परम.स्लग आपके लिंक से डेटा. उदाहरण के लिए, यदि आप नेविगेट करते हैं http://localhost: 5173/अग्नि, एप्लिकेशन पर प्रदर्शित सामग्री होगी "यह अग्नि पृष्ठ है।"

अब आप SvelteKit में रूटिंग की मूल बातें जानते हैं

SvelteKit में रूटिंग एक शक्तिशाली सुविधा है जो आपको अपने एप्लिकेशन को इस तरह से संरचित करने की अनुमति देती है जो समझ में आता है। इस सुविधा का उपयोग करने का तरीका समझने से आप अधिक कुशल और उपयोगकर्ता-अनुकूल वेब एप्लिकेशन बनाने में सक्षम होंगे। चाहे एक छोटा व्यक्तिगत प्रोजेक्ट बनाना हो या बड़े पैमाने पर एप्लिकेशन बनाना हो, SvelteKit के रूटिंग सिस्टम में सफल होने के लिए आवश्यक उपकरण मौजूद हैं।