En introduktion till routing i Svelte

Svelte är ett snabbt växande webbramverk som du kan använda för att bygga webbplatser. Det presenterar sig som ett lätt, lättanvänt alternativ till populära ramverk som React och Vue.

Varje populärt JavaScript-ramverk har ett kompletterande bibliotek som du kan använda för routing. Upptäck hur Svelte låter dig hantera dina webbadresser och koden som hanterar dem.

Populära routingbibliotek

Det mest populära routingbiblioteket för React är React Router, skapad av Remix-teamet. För VueJS finns Vue Router som ger utvecklaren fin kontroll över all navigering. I Svelte-världen är det mest populära routingbiblioteket svelte-routing.

Det andra huvuddirigeringsbiblioteket för Svelte är svelte-navigator. Eftersom det är en gaffel av svelte-routing, det är användbart att lära sig om det biblioteket först.

Hur svelte-routing-biblioteket fungerar

Det finns tre viktiga komponenter för att hantera rutter i Svelte:

Router, Länk, och Rutt. För att använda dem i din applikation kan du helt enkelt importera dessa verktyg från svelte-routing bibliotek.

<manus>
importera {Route, Router, Link} från "svelte-routing";
manus>

Routerkomponenten kan ha två valfria rekvisita: basväg och url. De basväg egendom liknar basnamn prop i React Router.

Som standard är den inställd på "/". basepath kan vara praktiskt om din applikation har flera ingångspunkter. Tänk till exempel på följande Svelte-kod:

<manus>
 importera { Route, Router, Link } från "svelte-routing";
 låt basepath = "/användare";
 låt sökväg = plats.sökvägsnamn;
manus>
<Router {basväg}>
<divpå: klicka={() => (sökväg = plats.sökväg)}>
<Länktill="/">Gå till hemmetLänk>
<Länktill="/användare/david">Logga in som DavidLänk>
div>
<huvud>
 Du är här: <koda>{väg}koda>
<Ruttväg="/">
<h1>Välkommen hem!h1>
Rutt>
<Ruttväg="/david">
<h1>Hej David!h1>
Rutt>
huvud>
Router>

Om du kör den här koden kommer du att märka att när du klickar på Gå till hemmet knappen navigerar webbläsaren till basvägen "/user". Route definierar komponenten som ska rendera om sökvägen matchar värdet i det angivna Rutt stötta.

Du kan definiera vilka element som ska renderas inuti ruttkomponenten eller som separata .svelte fil så länge du importerar den filen ordentligt. Till exempel:

<Ruttväg="/handla om"komponent={Handla om}/>

Kodblocket ovan talar om för webbläsaren att rendera App komponent när sökvägens namn är "/about".

När man använder svelte-routing, definiera interna länkar med Länk komponent istället för traditionell HTML a element.

Detta liknar hur React Router hanterar interna länkar; varje länkkomponent bör ha en till prop som talar om för webbläsaren vilken väg den ska navigera till.

När webbläsaren renderar en Svelte-komponent konverterar Svelte automatiskt alla Link-komponenter till motsvarande a element, som ersätter till prop med en href attribut. Det betyder att när du skriver följande:

<Länktill="/någon/sökväg">Detta är en länkkomponent i svelte-routingLänk>

Svelte presenterar det för webbläsaren som:

<ahref="/någon/sökväg">Detta är en länkkomponent i svelte-routinga>

Du bör använda länkkomponenten istället för den traditionella a element när man arbetar med svelte-routing. Det här är för att a element utför en omladdning av sidan som standard.

Skapa ett SPA med Svelte och Svelte-Routing

Det är dags att omsätta allt du har lärt dig i praktiken genom att skapa en enkel ordboksapplikation som låter användaren söka efter ord. Detta projekt kommer att använda gratis Ordbok API.

För att komma igång, se till att du har Yarn installerat på din maskin och kör:

garn skapa vite

Detta kommer att bygga ett nytt projekt med hjälp av byggverktyget Vite. Namnge ditt projekt och välj sedan "Svelte" som ramverk och "JavaScript" som variant. Efter det, kör följande kommandon efter varandra:

CD
garn
garn lägga till svelte-routing
garn dev

Ta sedan bort innehållet i App.svelte fil och ändra projektstrukturen så att den ser ut så här:

Från illustrationen ovan kan du se att det finns en "komponenter"-mapp med två filer: Hem.svelte och Mening.svelte. Mening.svelte är den komponent som återges när användaren söker efter ett ord.

Navigera till App.svelte fil och importera komponenterna Route, Router och Link från svelte-routing-biblioteket. Se också till att importera Hem.svelte och App.svelte komponenter.

<manus>
 importera { Route, Router, Link } från "svelte-routing";
 importera hem från "./components/Home.svelte";
 import Betydelse från "./components/Meaning.svelte";
manus>

Skapa sedan en routerkomponent som omsluter en huvud HTML-element med klassen "app".

<Router>
<huvudklass="app">
huvud>
Router>

I den huvud element, lägg till en nav element med en länkkomponent som underordnad. Denna länkkomponents "to" prop ska peka på "/". Denna komponent låter användaren navigera till hemsidan.

<huvudklass="app">
<nav>
<Länktill="/">HemLänk>
nav>
huvud>

Det är nu dags att jobba på sträckorna. När användaren laddar appen visas Hem komponent ska återges.

Att navigera till "/find/:word" bör återge Menande komponent. ":word"-satsen är en sökvägsparameter.

För det här projektet behöver du inte oroa dig för CSS. Byt helt enkelt ut ditt eget innehåll app.css fil med innehållet i app.css fil från detta GitHub-förråd.

Det är nu dags att definiera rutterna. Rotnivåsökvägen bör återge Hem komponent, medan "/find/:word" ska återge Menande komponent.

<Ruttväg="/"komponent={Hem} />
<Ruttväg="/hitta/:ord"låt: params>
<Menandeord={params.word} />
Rutt>

Detta kodblock använder låta direktiv för att skicka parametern "word" ner till Menande komponent som en rekvisita.

Öppna nu Hem.svelte fil och importera navigera verktyget från "svelte-routing"-biblioteket och definiera en variabel skrev inWord.

<manus>
 importera { navigera } från "svelte-routing";
 låt enteredWord;
manus>

Under manus tagg, skapa ett huvudelement med klassen "hemsida", skapa sedan en div element med klassen "lexikon-text".

<huvudklass="hemsida">
<divklass="lexikon-text">Lexikondiv>
huvud>

Skapa sedan ett formulär med en på: lämna in direktiv. Detta formulär bör innehålla två barn: en inmatning element vars värde är bundet till skrev inWord variabel och en skicka-knapp som villkorligt återges så snart användaren börjar skriva:

<formpå: lämna in|förhindraStandard={() => navigate(`/find/${enteredWord.toLowerCase()}`)}>
<inmatning
 type="text"
 bind: värde={enteredWord}
 placeholder="Börja din sökning..."
 autofokus
 />
 {#if enteredWord}
<knapptyp="Skicka in">Sök i Wordknapp>
 {/om}
form>

Detta kodblock använder navigera funktion för att omdirigera användaren när inlämningsåtgärden är klar. Öppna nu Mening.svelte fil och, i skripttaggen, exportera ord stötta och skapa en felmeddelande variabel:

export låt ord;
let errorMessage = "Ingen anslutning. Kontrollera ditt internet";

Gör sedan en GET-begäran till Dictionary API och passerar ord som parameter:

asynkronfungeragetWordMeaning(ord) {
konst svar = vänta hämta(
` https://api.dictionaryapi.dev/api/v2/entries/en/${word}`
 );
konst json = vänta response.json();
trösta.log (json);
om (response.ok) {
lämna tillbaka json;
 } annan {
 errorMessage = json.meddelande;
kastanyFel(json);
 }
 }
låta lova = getWordMeaning (ord);

I kodblocket ovan returnerar den asynkrona funktionen JSON-data om svaret lyckas. Löftevariabeln representerar resultatet av getWordMeaning funktion när den anropas.

I markeringen definierar du en div med klassen meningssida. Därefter definierar du ett h1-element som håller ord variabel med gemener:

<divklass="meningssida">
<h1>
 {word.toLowerCase()}
h1>
div>

Använd sedan Sveltes vänta-block för att anropa getWordMeaning fungera:

{#await löfte}
<sid>Läser in...sid>
{:then entries}
{:fånga}
 {felmeddelande}
{/vänta}

Den här koden visar Läser in... sms: a när GET-begäran görs till API. Om det finns ett fel kommer det att visa innehållet i felmeddelande.

I den {:then entries} block, lägg till följande:

{#each entries as entry}
 {#each entry.meanings as meaning}
<divklass="inträde">
<divklass="del av tal">
 {meaning.partOfSpeech}
div>
<ol>
 {#each meaning.definitions as definition}
<li>
 {definition.definition}
<br />
<divklass="exempel">
 {#if definition.example}
 {definition.example}
 {/om}
div>
li>
 {/varje}
ol>
div>
 {/varje}
{/varje}

Om löftet löser sig framgångsrikt poster variabeln innehåller de resulterande data.

Sedan för varje iteration av inträde och menande, återger den här koden den del av tal som används meaning.partOfSpeech och en lista över definitioner som använder definition.definition. Det kommer också att återge en exempelmening, om en sådan finns tillgänglig.

Det är allt. Du har skapat en ordbok Single Page Application (SPA) med svelte-routing. Du kan ta saker längre om du vill, eller så kan du checka ut svelte-navigator, en gaffel av svelte-routing.

Förbättra användarupplevelsen med routing på klientsidan

Det finns många fördelar med att hantera routing i webbläsaren istället för servern. Applikationer som använder routing på klientsidan kan kännas smidigare för slutanvändaren, särskilt när de paras ihop med animationer och övergångar.

Men om du vill att din webbplats ska rankas högre i sökmotorerna bör du överväga att hantera rutter på servern.