En introduksjon til ruting i Svelte

Svelte er et raskt voksende nettrammeverk du kan bruke til å bygge nettsider. Den presenterer seg som et lett, brukervennlig alternativ til populære rammeverk som React og Vue.

Alle populære JavaScript-rammeverk har et følgebibliotek som du kan bruke til ruting. Oppdag hvordan Svelte lar deg administrere nettadressene dine og koden som håndterer dem.

Populære rutingbiblioteker

Det mest populære rutingsbiblioteket for React er React Router, laget av Remix-teamet. For VueJS er det Vue Router som gir utvikleren fin kontroll over enhver navigasjon. I Svelte-verdenen er det mest populære rutingbiblioteket svelte-ruting.

Det andre hovedrutingsbiblioteket for Svelte er svelte-navigator. Siden det er en gaffel av svelte-ruting, er det nyttig å lære om det biblioteket først.

Hvordan det svelte-rutingsbiblioteket fungerer

Det er tre viktige komponenter for håndtering av ruter i Svelte:

Ruter, Link, og Rute. For å bruke dem i applikasjonen din kan du ganske enkelt importere disse verktøyene fra svelte-ruting bibliotek.

<manus>
importer {Route, Router, Link} fra "svelte-routing";
manus>

Ruterkomponenten kan ha to valgfrie rekvisitter: basepath og url. De basepath eiendom ligner på basenavn prop i React Router.

Som standard er den satt til "/". basepath kan være nyttig hvis applikasjonen din har flere inngangspunkter. Tenk for eksempel på følgende Svelte-kode:

<manus>
 importer { Route, Router, Link } fra "svelte-routing";
 la basepath = "/bruker";
 la bane = plassering.stinavn;
manus>
<Ruter {basepath}>
<divved trykk={() => (bane = location.pathname)}>
<Linktil="/">Gå hjemLink>
<Linktil="/bruker/david">Logg på som DavidLink>
div>
<hoved->
 Du er her: <kode>{sti}kode>
<Rutesti="/">
<h1>Velkommen hjem!h1>
Rute>
<Rutesti="/david">
<h1>Hei David!h1>
Rute>
hoved->
Ruter>

Hvis du kjører denne koden, vil du legge merke til at når du klikker på Gå hjem -knappen, navigerer nettleseren til grunnbanen "/bruker". Rute definerer komponenten som skal gjengis hvis banen samsvarer med verdien i den angitte Rute rekvisitt.

Du kan definere hvilke elementer som skal gjengis inne i rutekomponenten eller som separate .svelte fil så lenge du importerer filen på riktig måte. For eksempel:

<Rutesti="/Om"komponent={Om}/>

Kodeblokken ovenfor forteller nettleseren å gjengi App komponent når banenavnet er "/about".

Når du bruker svelte-ruting, definere interne koblinger med Link komponent i stedet for tradisjonell HTML en elementer.

Dette ligner på hvordan React Router håndterer interne lenker; hver Link-komponent skal ha en til prop som forteller nettleseren hvilken bane den skal navigere til.

Når nettleseren gjengir en Svelte-komponent, konverterer Svelte automatisk alle Link-komponenter til tilsvarende en elementer, som erstatter til rekvisitt med en href Egenskap. Dette betyr at når du skriver følgende:

<Linktil="/noen/sti">Dette er en koblingskomponent i svelte-rutingLink>

Svelte presenterer det for nettleseren som:

<enhref="/noen/sti">Dette er en koblingskomponent i svelte-rutingen>

Du bør bruke Link-komponenten i stedet for den tradisjonelle en element når du arbeider med svelte-ruting. Dette er fordi en elementer utfører en sideinnlasting som standard.

Opprette et SPA med Svelte og Svelte-Routing

Det er på tide å sette alt du har lært i praksis ved å lage en enkel ordbokapplikasjon som lar brukeren søke etter ord. Dette prosjektet vil bruke gratis Ordbok API.

For å komme i gang, sørg for at du har Yarn installert på maskinen din og kjør:

garn skape vite

Dette vil stillas et nytt prosjekt ved hjelp av Vite byggeverktøyet. Gi prosjektet et navn og velg deretter "Svelte" som rammeverk og "JavaScript" som variant. Etter det, kjør følgende kommandoer etter hverandre:

cd
garn
garn legge til svelte-ruting
garn dev

Deretter sletter du innholdet i App.svelte fil og endre prosjektstrukturen til å se slik ut:

Fra illustrasjonen ovenfor kan du se at det er en "komponenter"-mappe med to filer: Hjem.svelte og Betydning.svelte. Betydning.svelte er komponenten som gjengis når brukeren søker etter et ord.

Naviger til App.svelte fil og importer rute-, ruter- og koblingskomponentene fra svelte-routing-biblioteket. Sørg også for å importere Hjem.svelte og App.svelte komponenter.

<manus>
 importer { Route, Router, Link } fra "svelte-routing";
 import hjem fra "./components/Home.svelte";
 import Betydning fra "./components/Meaning.svelte";
manus>

Deretter oppretter du en ruterkomponent som omslutter en hoved- HTML-element med klassen "app".

<Ruter>
<hoved-klasse="app">
hoved->
Ruter>

I hoved- element, legg til en nav element med en Link-komponent som underordnet. Denne koblingskomponentens "til" prop skal peke til "/". Denne komponenten lar brukeren navigere til hjemmesiden.

<hoved-klasse="app">
<nav>
<Linktil="/">HjemLink>
nav>
hoved->

Det er nå på tide å jobbe med rutene. Når brukeren laster inn appen, Hjem komponenten skal gjengis.

Navigering til "/find/:word" skal gjengi Betydning komponent. ":word"-leddet er en baneparameter.

For dette prosjektet trenger du ikke bekymre deg for CSS. Bare bytt ut innholdet ditt app.css fil med innholdet i app.css fil fra dette GitHub-depotet.

Det er nå på tide å definere rutene. Rotnivåbanen skal gjengi Hjem komponent, mens "/finn/:ord" skal gjengi Betydning komponent.

<Rutesti="/"komponent={Hjem} />
<Rutesti="/finn/:ord"la: params>
<Betydningord={params.word} />
Rute>

Denne kodeblokken bruker la direktiv for å sende "word"-parameteren ned til Betydning komponent som en rekvisitt.

Nå åpner du Hjem.svelte fil og importer navigere verktøyet fra "svelte-routing"-biblioteket og definere en variabel skrev innWord.

<manus>
 import { naviger } fra "svelte-routing";
 la innWord;
manus>

Under manus tag, lag et hovedelement med klassen "hjemmeside", og lag deretter en div element med klassen "ordbok-tekst".

<hoved-klasse="hjemmeside">
<divklasse="ordbok-tekst">Ordbokdiv>
hoved->

Deretter lager du et skjema med en på: sende inn direktiv. Dette skjemaet skal inneholde to barn: en input element hvis verdi er bundet til skrev innWord variabel og en send-knapp som er betinget gjengitt så snart brukeren begynner å skrive:

<formpå: sende inn|forhindreStandard={() => navigate(`/find/${enteredWord.toLowerCase()}`)}>
<input
 type="tekst"
 bind: verdi={enteredWord}
 placeholder="Begynn søket..."
 autofokus
 />
 {#if enteredWord}
<knapptype="sende inn">Søk i Wordknapp>
 {/hvis}
form>

Denne kodeblokken bruker navigere funksjon for å omdirigere brukeren når innsendingshandlingen er fullført. Nå åpner du Betydning.svelte fil, og eksporter i script-koden ord støtte og lage en feilmelding variabel:

eksport la ordet;
let errorMessage = "Ingen tilkobling. Sjekk Internett";

Deretter gjør du en GET-forespørsel til Dictionary API ved å sende ord som parameter:

asynkronfunksjongetWordMeaning(ord) {
konst svar = avvente hente(
` https://api.dictionaryapi.dev/api/v2/entries/en/${word}`
 );
konst json = avvente response.json();
konsoll.log (json);
hvis (response.ok) {
komme tilbake json;
 } ellers {
 errorMessage = json.message;
kastenyFeil(json);
 }
 }
la løfte = getWordMeaning (ord);

I kodeblokken ovenfor returnerer den asynkrone funksjonen JSON-dataene hvis svaret er vellykket. Løftevariabelen representerer resultatet av getWordMeaning funksjon når den påkalles.

I markeringen definerer du en div med klassen meningsside. Definer deretter et h1-element som inneholder ord variabel med små bokstaver:

<divklasse="meningsside">
<h1>
 {word.toLowerCase()}
h1>
div>

Deretter bruker du Sveltes vent-blokker for å ringe getWordMeaning funksjon:

{#avvent løfte}
<s>Laster inn...s>
{:then entries}
{:å fange}
 {feilmelding}
{/avvente}

Denne koden viser Laster inn... tekst når GET-forespørselen er laget til API. Hvis det er en feil, vil den vise innholdet i feilmelding.

I {:then entries} blokk, legg til følgende:

{#each entries as entry}
 {#each entry.meanings as meaning}
<divklasse="inngang">
<divklasse="del av en tale">
 {meaning.partOfSpeech}
div>
<ol>
 {#each meaning.definitions as definition}
<li>
 {definition.definition}
<br />
<divklasse="eksempel">
 {#if definition.example}
 {definisjon.eksempel}
 {/hvis}
div>
li>
 {/Hver}
ol>
div>
 {/Hver}
{/Hver}

Hvis løftet løser seg, vil innganger variabelen inneholder de resulterende dataene.

Deretter for hver iterasjon av inngang og betydning, gjengir denne koden den delen av tale som bruker mening.partOfSpeech og en liste over definisjoner som bruker definisjon.definisjon. Den vil også gjengi en eksempelsetning, hvis en er tilgjengelig.

Det er det. Du har opprettet en ordbok Single Page Application (SPA) ved hjelp av svelte-ruting. Du kan ta ting videre hvis du vil, eller du kan sjekke ut svelte-navigator, en gaffel av svelte-ruting.

Forbedre brukeropplevelsen med ruting på klientsiden

Det er mange fordeler med å håndtere ruting i nettleseren i stedet for serveren. Applikasjoner som bruker ruting på klientsiden kan føles jevnere for sluttbrukeren, spesielt når de er sammenkoblet med animasjoner og overganger.

Men hvis du vil at nettstedet ditt skal rangeres høyere i søkemotorene, bør du vurdere å håndtere ruter på serveren.