स्वेल्ट में रूटिंग का एक परिचय

Svelte एक तेजी से विकसित होने वाला वेब फ्रेमवर्क है जिसका उपयोग आप वेबसाइट बनाने के लिए कर सकते हैं। यह खुद को रिएक्ट और व्यू जैसे लोकप्रिय फ्रेमवर्क के हल्के, उपयोग में आसान विकल्प के रूप में प्रस्तुत करता है।

प्रत्येक लोकप्रिय जावास्क्रिप्ट फ्रेमवर्क में एक सहयोगी लाइब्रेरी होती है जिसका उपयोग आप रूटिंग के लिए कर सकते हैं। जानें कि कैसे Svelte आपको अपने URL और उन्हें संभालने वाले कोड को प्रबंधित करने देता है।

लोकप्रिय रूटिंग लाइब्रेरी

रिएक्ट के लिए सबसे लोकप्रिय रूटिंग लाइब्रेरी रिएक्ट राउटर है, रीमिक्स टीम द्वारा बनाया गया। VueJS के लिए, Vue राउटर है जो डेवलपर को किसी भी नेविगेशन पर अच्छा नियंत्रण देता है। Svelte दुनिया में, सबसे लोकप्रिय रूटिंग लाइब्रेरी है व्यापक मार्ग.

Svelte के लिए अन्य मुख्य रूटिंग लाइब्रेरी है व्यापक-नेविगेटर. चूंकि यह कांटा है व्यापक मार्ग, पहले उस लाइब्रेरी के बारे में जानना उपयोगी है।

स्वेल्ट-रूटिंग लाइब्रेरी कैसे काम करती है

Svelte में मार्गों को संभालने के लिए तीन महत्वपूर्ण घटक हैं:

रूटर, जोड़ना, और मार्ग. अपने एप्लिकेशन में इनका उपयोग करने के लिए, आप बस इन उपयोगिताओं को यहां से आयात कर सकते हैं व्यापक मार्ग पुस्तकालय।

<लिखी हुई कहानी>
"स्वेल्ट-रूटिंग" से {रूट, राउटर, लिंक} आयात करें;
लिखी हुई कहानी>

राउटर घटक में दो वैकल्पिक प्रॉप्स हो सकते हैं: आधारपथ और यूआरएल. आधारपथ संपत्ति के समान है बेसनाम रिएक्ट राउटर में प्रोप।

डिफ़ॉल्ट रूप से, यह "/" पर सेट है। यदि आपके एप्लिकेशन में एकाधिक प्रवेश बिंदु हैं तो बेसपाथ काम में आ सकता है। उदाहरण के लिए, निम्नलिखित Svelte कोड पर विचार करें:

<लिखी हुई कहानी>
 "स्वेल्ट-रूटिंग" से आयात { रूट, राउटर, लिंक };
 चलो बेसपाथ = "/उपयोगकर्ता";
 चलो पथ = स्थान.पथनाम;
लिखी हुई कहानी>
<रूटर {आधारपथ}>
<डिवक्लिक पर={() => (पथ = स्थान.पथनाम)}>
<जोड़नाको="/">घर जाओजोड़ना>
<जोड़नाको="/उपयोगकर्ता/डेविड">डेविड के रूप में लॉगिन करेंजोड़ना>
डिव>
<मुख्य>
 आप यहां हैं: <कोड>{पथ}कोड>
<मार्गपथ="/">
<एच 1>सुस्वागतम्!एच 1>
मार्ग>
<मार्गपथ="/डेविड">
<एच 1>नमस्ते डेविड!एच 1>
मार्ग>
मुख्य>
रूटर>

यदि आप इस कोड को चलाते हैं, तो जब आप क्लिक करेंगे तो आप इसे देखेंगे घर जाओ बटन, ब्राउज़र बेसपाथ "/user" पर नेविगेट करता है। रूट उस घटक को परिभाषित करता है जिसे प्रस्तुत करना चाहिए यदि पथ निर्दिष्ट मान से मेल खाता है मार्ग प्रोप.

आप परिभाषित कर सकते हैं कि रूट घटक के अंदर या अलग से कौन से तत्व प्रस्तुत करने हैं .svelte फ़ाइल तब तक बनाएं जब तक आप उस फ़ाइल को ठीक से आयात नहीं करते। उदाहरण के लिए:

<मार्गपथ="/के बारे में"अवयव={के बारे में}/>

उपरोक्त कोड ब्लॉक ब्राउज़र को रेंडर करने के लिए कहता है अनुप्रयोग घटक जब पथ का नाम "/about" है।

उपयोग करते समय व्यापक मार्ग, के साथ आंतरिक लिंक को परिभाषित करें जोड़ना पारंपरिक HTML के बजाय घटक ए तत्व.

यह उसी तरह है जैसे रिएक्ट राउटर आंतरिक लिंक को संभालता है; प्रत्येक लिंक घटक में एक होना चाहिए को प्रोप जो ब्राउज़र को बताता है कि किस पथ पर नेविगेट करना है।

जब ब्राउज़र एक Svelte घटक प्रस्तुत करता है, तो Svelte स्वचालित रूप से सभी लिंक घटकों को समकक्ष में परिवर्तित कर देता है ए तत्वों, की जगह को एक के साथ प्रोप href गुण। इसका मतलब यह है कि जब आप निम्नलिखित लिखते हैं:

<जोड़नाको="/कुछ/पथ">यह स्वेल्ट-रूटिंग में एक लिंक घटक हैजोड़ना>

Svelte इसे ब्राउज़र में इस प्रकार प्रस्तुत करता है:

<एhref="/कुछ/पथ">यह स्वेल्ट-रूटिंग में एक लिंक घटक हैए>

आपको पारंपरिक के बजाय लिंक घटक का उपयोग करना चाहिए ए स्वेल्ट-रूटिंग के साथ काम करते समय तत्व। यह है क्योंकि ए तत्व डिफ़ॉल्ट रूप से पृष्ठ पुनः लोड करते हैं।

स्वेल्ट और स्वेल्ट-रूटिंग के साथ एक एसपीए बनाना

अब एक सरल शब्दकोश एप्लिकेशन बनाकर आपने जो कुछ भी सीखा है उसे अभ्यास में लाने का समय आ गया है जो उपयोगकर्ता को शब्दों की खोज करने की अनुमति देता है। यह प्रोजेक्ट निःशुल्क उपयोग करेगा शब्दकोश एपीआई.

आरंभ करने के लिए, सुनिश्चित करें कि आपकी मशीन पर यार्न स्थापित है और चलाएं:

यार्न वाइट बनाएं

इसका उपयोग करके एक नई परियोजना तैयार की जाएगी वाइट बिल्ड टूल. अपने प्रोजेक्ट को नाम दें, फिर फ्रेमवर्क के रूप में "स्वेल्टे" और वेरिएंट के रूप में "जावास्क्रिप्ट" चुनें। उसके बाद, निम्नलिखित कमांड को एक के बाद एक चलाएँ:

सीडी
धागा
यार्न स्वेल्ट-रूटिंग जोड़ें
यार्न देव

इसके बाद, की सामग्री हटाएँ App.svelte फ़ाइल करें और इस तरह दिखने के लिए प्रोजेक्ट संरचना बदलें:

उपरोक्त चित्रण से, आप देख सकते हैं कि दो फ़ाइलों वाला एक "घटक" फ़ोल्डर है: घर.दुबला और मतलब.सुगंधित. मतलब.सुगंधित वह घटक है जो उपयोगकर्ता द्वारा किसी शब्द की खोज करने पर प्रस्तुत होगा।

पर नेविगेट करें App.svelte स्वेल्ट-रूटिंग लाइब्रेरी से रूट, राउटर और लिंक घटकों को फ़ाइल करें और आयात करें। का आयात करना भी सुनिश्चित करें घर.दुबला और App.svelte अवयव।

<लिखी हुई कहानी>
 "स्वेल्ट-रूटिंग" से आयात { रूट, राउटर, लिंक };
 "./components/Home.svelte" से होम आयात करें;
 आयात का अर्थ "./components/Meaning.svelte" से;
लिखी हुई कहानी>

इसके बाद, एक राउटर घटक बनाएं जो a को लपेटता है मुख्य "ऐप" वर्ग के साथ HTML तत्व।

<रूटर>
<मुख्यकक्षा="अनुप्रयोग">
मुख्य>
रूटर>

में मुख्य तत्व, एक जोड़ें एनएवी एक लिंक घटक वाला तत्व अपने बच्चे के रूप में। इस लिंक घटक का "टू" प्रोप "/" की ओर इंगित करना चाहिए। यह घटक उपयोगकर्ता को मुखपृष्ठ पर नेविगेट करने की अनुमति देगा।

<मुख्यकक्षा="अनुप्रयोग">
<एनएवी>
<जोड़नाको="/">घरजोड़ना>
एनएवी>
मुख्य>

अब रूटों पर काम करने का समय आ गया है. जब उपयोगकर्ता ऐप लोड करता है, तो घर घटक को प्रस्तुत करना चाहिए।

"/find/:word" पर नेविगेट करने से इसे प्रस्तुत करना चाहिए अर्थ अवयव। ":शब्द" खंड एक पथ पैरामीटर है।

इस प्रोजेक्ट के लिए आपको सीएसएस के बारे में चिंता करने की ज़रूरत नहीं है। बस अपनी स्वयं की सामग्री बदलें ऐप.सीएसएस की सामग्री के साथ फ़ाइल करें ऐप.सीएसएस फ़ाइल से यह GitHub रिपॉजिटरी.

अब मार्गों को परिभाषित करने का समय आ गया है। रूट लेवल पथ को प्रस्तुत करना चाहिए घर घटक, जबकि "/find/:word" को प्रस्तुत करना चाहिए अर्थ अवयव।

<मार्गपथ="/"अवयव={घर} />
<मार्गपथ="/ढूंढें/:शब्द"चलो: पैरामीटर>
<अर्थशब्द={params.word} />
मार्ग>

यह कोड ब्लॉक इसका उपयोग करता है होने देना "शब्द" पैरामीटर को नीचे तक पास करने का निर्देश अर्थ एक प्रोप के रूप में घटक।

अब, खोलें घर.दुबला फ़ाइल करें और आयात करें नेविगेट "स्वेल्ट-रूटिंग" लाइब्रेरी से उपयोगिता और एक वेरिएबल को परिभाषित करें दर्जशब्द.

<लिखी हुई कहानी>
 "स्वेल्ट-रूटिंग" से आयात {नेविगेट };
 चलो शब्द दर्ज करें;
लिखी हुई कहानी>

नीचे लिखी हुई कहानी टैग, क्लास "होमपेज" के साथ एक मुख्य तत्व बनाएं, फिर एक बनाएं डिव "शब्दकोश-पाठ" वर्ग वाला तत्व।

<मुख्यकक्षा="मुखपृष्ठ">
<डिवकक्षा="शब्दकोश-पाठ">शब्दकोषडिव>
मुख्य>

इसके बाद, a के साथ एक फॉर्म बनाएं पर: सबमिट करें निर्देश. इस फॉर्म में दो बच्चे होने चाहिए: a इनपुट वह तत्व जिसका मान इससे बंधा है दर्जशब्द वैरिएबल और एक सबमिट बटन जो उपयोगकर्ता द्वारा टाइप करना शुरू करते ही सशर्त रूप से प्रस्तुत किया जाता है:

<प्रपत्रपर: सबमिट करें|चूक को रोकें={() => नेविगेट करें(`/find/${enteredWord.toLowerCase()}`)}>
<इनपुट
 प्रकार = "पाठ"
 बाँधें: मान={enteredWord}
 प्लेसहोल्डर = "अपनी खोज शुरू करें..."
 ऑटोफोकस
 />
 {#अगर शब्द दर्ज किया गया है}
<बटनप्रकार="जमा करना">शब्द खोजेंबटन>
 {/अगर}
प्रपत्र>

यह कोड ब्लॉक इसका उपयोग करता है नेविगेट सबमिट कार्रवाई समाप्त होने के बाद उपयोगकर्ता को पुनर्निर्देशित करने का कार्य। अब, खोलें मतलब.सुगंधित फ़ाइल और, स्क्रिप्ट टैग में, निर्यात करें शब्द प्रोप करें और बनाएं त्रुटि संदेश चर:

निर्यात लेट शब्द;
चलो errorMessage = "कोई कनेक्शन नहीं। अपना इंटरनेट जांचें";

इसके बाद, डिक्शनरी एपीआई को पास करते हुए एक GET अनुरोध करें शब्द पैरामीटर के रूप में:

asyncसमारोहशब्द का अर्थ प्राप्त करें(शब्द) {
कॉन्स्ट प्रतिक्रिया = इंतजार लाना(
` https://api.dictionaryapi.dev/api/v2/entries/en/${शब्द}`
 );
कॉन्स्ट जेएसओएन = इंतजार प्रतिक्रिया.json();
सांत्वना देना.लॉग (जेएसओएन);
अगर (प्रतिक्रिया.ओके) {
वापस करना json;
 } अन्य {
 त्रुटि संदेश = json.message;
फेंकनानयागलती(जेएसओएन);
 }
 }
होने देना वादा = getWordMeaning (शब्द);

उपरोक्त कोड ब्लॉक में, प्रतिक्रिया सफल होने पर एसिंक्रोनस फ़ंक्शन JSON डेटा लौटाता है। वादा चर के परिणाम का प्रतिनिधित्व करता है शब्द का अर्थ प्राप्त करें आह्वान किए जाने पर कार्य करें।

मार्कअप में, क्लास के साथ एक div परिभाषित करें अर्थ-पृष्ठ. इसके बाद, एक h1 तत्व को परिभाषित करें जो इसे धारण करता है शब्द छोटे अक्षरों में परिवर्तनशील:

<डिवकक्षा="अर्थ-पृष्ठ">
<एच 1>
 {word.toLowerCase()}
एच 1>
डिव>

इसके बाद, कॉल करने के लिए Svelte के wait ब्लॉक का उपयोग करें शब्द का अर्थ प्राप्त करें समारोह:

{#प्रतीक्षा वादा}
<पी>लोड हो रहा है...पी>
{:तब प्रविष्टियाँ}
{:पकड़ना}
 {त्रुटि संदेश}
{/प्रतीक्षा करें}

यह कोड प्रदर्शित करता है लोड हो रहा है... पाठ कब GET अनुरोध किया गया है एपीआई के लिए. यदि कोई त्रुटि है, तो यह इसकी सामग्री दिखाएगा त्रुटि संदेश.

में {:तब प्रविष्टियाँ} ब्लॉक करें, निम्नलिखित जोड़ें:

{#प्रत्येक प्रविष्टि प्रविष्टि के रूप में}
 {#प्रत्येक प्रविष्टि.अर्थ के रूप में अर्थ}
<डिवकक्षा="प्रवेश">
<डिवकक्षा="शब्द भेद">
 {अर्थ.partOfSpeech}
डिव>
<राजभाषा>
 {#प्रत्येक अर्थ.परिभाषाएँ परिभाषा के रूप में}
<ली>
 {परिभाषा.परिभाषा}
<बीआर />
<डिवकक्षा="उदाहरण">
 {#if परिभाषा.उदाहरण}
 {परिभाषा.उदाहरण}
 {/अगर}
डिव>
ली>
 {/प्रत्येक}
राजभाषा>
डिव>
 {/प्रत्येक}
{/प्रत्येक}

यदि वादा सफलतापूर्वक हल हो जाता है, तो प्रविष्टियां वेरिएबल में परिणामी डेटा होता है।

फिर प्रत्येक पुनरावृत्ति के लिए प्रवेश और अर्थ, यह कोड भाषण के भाग का उपयोग करके प्रस्तुत करता है अर्थ.partOfSpeech और उपयोग करने वाली परिभाषाओं की एक सूची परिभाषा.परिभाषा. यदि कोई उपलब्ध हो तो यह एक उदाहरण वाक्य भी प्रस्तुत करेगा।

इतना ही। आपने स्वेल्ट-रूटिंग का उपयोग करके एक शब्दकोश सिंगल पेज एप्लिकेशन (एसपीए) बनाया है। आप चाहें तो चीजों को आगे ले जा सकते हैं, या जांच कर सकते हैं व्यापक-नेविगेटर, का एक कांटा व्यापक मार्ग.

क्लाइंट-साइड रूटिंग के साथ उपयोगकर्ता अनुभव में सुधार

सर्वर के बजाय ब्राउज़र में रूटिंग को संभालने के कई फायदे हैं। क्लाइंट-साइड रूटिंग का उपयोग करने वाले एप्लिकेशन अंतिम उपयोगकर्ता के लिए अधिक सहज महसूस कर सकते हैं, खासकर जब एनिमेशन और ट्रांज़िशन के साथ जोड़ा जाता है।

हालाँकि, यदि आप चाहते हैं कि आपकी वेबसाइट खोज इंजन में उच्च रैंक करे, तो आपको सर्वर पर मार्गों को संभालने पर विचार करना चाहिए।