Uma introdução ao roteamento em Svelte

Svelte é uma estrutura da Web de rápido crescimento que você pode usar para criar sites. Ele se apresenta como uma alternativa leve e fácil de usar para frameworks populares como React e Vue.

Cada estrutura JavaScript popular tem uma biblioteca complementar que você pode usar para roteamento. Descubra como o Svelte permite que você gerencie seus URLs e o código que os manipula.

Bibliotecas de roteamento populares

A biblioteca de roteamento mais popular para o React é o React Router, criado pela equipe Remix. Para o VueJS, existe o Vue Router, que dá ao desenvolvedor um controle preciso sobre qualquer navegação. No mundo Svelte, a biblioteca de roteamento mais popular é roteamento esbelto.

A outra biblioteca de roteamento principal para Svelte é navegador esbelto. Já que é uma bifurcação de roteamento esbelto, é útil aprender sobre essa biblioteca primeiro.

Como funciona a biblioteca de roteamento svelte

Existem três componentes importantes para lidar com rotas no Svelte: Roteador, Link, e Rota. Para usá-los em seu aplicativo, você pode simplesmente importar esses utilitários do roteamento esbelto biblioteca.

<roteiro>
importar {Route, Router, Link} de "svelte-routing";
roteiro>

O componente Router pode ter dois props opcionais: caminho base e url. O caminho base propriedade é semelhante ao nome base prop no React Router.

Por padrão, é definido como "/". basepath pode ser útil se seu aplicativo tiver vários pontos de entrada. Por exemplo, considere o seguinte código Svelte:

<roteiro>
 importar { Rota, Roteador, Link } de "svelte-routing";
 deixe basepath = "/usuário";
 let path = location.pathname;
roteiro>
<Roteador {caminho base}>
<divem: clique={() => (path = location.pathname)}>
<Linkpara="/">ir para casaLink>
<Linkpara="/usuário/david">Entrar como DavidLink>
div>
<principal>
 Você está aqui: <código>{caminho}código>
<Rotacaminho="/">
<h1>Bem-vindo a casa!h1>
Rota>
<Rotacaminho="/davi">
<h1>Olá, David!h1>
Rota>
principal>
Roteador>

Se você executar esse código, notará que, ao clicar no botão ir para casa botão, o navegador navega para o caminho base "/user". A rota define o componente que deve renderizar se o caminho corresponder ao valor especificado Rota suporte.

Você pode definir quais elementos renderizar dentro do componente Rota ou como um elemento separado .svelte arquivo, desde que você importe esse arquivo corretamente. Por exemplo:

<Rotacaminho="/sobre"componente={Sobre}/>

O bloco de código acima diz ao navegador para renderizar o Aplicativo componente quando o nome do caminho é "/sobre".

ao usar roteamento esbelto, definir links internos com o Link componente em vez do HTML tradicional a elementos.

Isso é semelhante a como o React Router lida com links internos; todo componente Link deve ter um para prop que informa ao navegador para qual caminho navegar.

Quando o navegador renderiza um componente Svelte, o Svelte converte automaticamente todos os componentes Link em componentes equivalentes a elementos, substituindo o para suporte com um href atributo. Isso significa que quando você escreve o seguinte:

<Linkpara="/algum/caminho">Este é um componente de link em roteamento svelteLink>

Svelte o apresenta ao navegador como:

<ahref="/algum/caminho">Este é um componente de link em roteamento sveltea>

Você deve usar o componente Link em vez do tradicional a elemento ao trabalhar com roteamento svelte. Isto é porque a elementos executam um recarregamento de página por padrão.

Criando um SPA com Svelte e Svelte-Routing

É hora de colocar em prática tudo o que você aprendeu criando um aplicativo de dicionário simples que permite ao usuário buscar palavras. Este projeto usará o livre API de dicionário.

Para começar, certifique-se de ter o Yarn instalado em sua máquina e execute:

fio criar vite

Isso irá estruturar um novo projeto usando a ferramenta de construção Vite. Nomeie seu projeto e escolha "Svelte" como estrutura e "JavaScript" como variante. Depois disso, execute os seguintes comandos um após o outro:

cd
fio
fio adicionar svelte-routing
desenvolvedor de fios

Em seguida, exclua o conteúdo do App.svelte arquivo e altere a estrutura do projeto para ficar assim:

Na ilustração acima, você pode ver que existe uma pasta "components" com dois arquivos: Home.svelte e Significado.svelte. Significado.svelte é o componente que será renderizado quando o usuário procurar por uma palavra.

Navegue até o App.svelte arquivo e importe os componentes Route, Router e Link da biblioteca svelte-routing. Certifique-se também de importar o Home.svelte e App.svelte componentes.

<roteiro>
 importar { Rota, Roteador, Link } de "svelte-routing";
 importar Home de "./components/Home.svelte";
 import Significado de "./components/Meaning.svelte";
roteiro>

Em seguida, crie um componente Router que envolve um principal Elemento HTML com a classe "app".

<Roteador>
<principalaula="aplicativo">
principal>
Roteador>

No principal elemento, adicione um navegação elemento com um componente Link como seu filho. A propriedade "to" deste componente Link deve apontar para "/". Este componente permitirá que o usuário navegue até a página inicial.

<principalaula="aplicativo">
<navegação>
<Linkpara="/">LarLink>
navegação>
principal>

Agora é hora de trabalhar nas rotas. Quando o usuário carrega o aplicativo, o Lar componente deve renderizar.

Navegar para "/find/:word" deve renderizar o Significado componente. A cláusula ":word" é um parâmetro de caminho.

Para este projeto, você não precisa se preocupar com CSS. Basta substituir o conteúdo do seu próprio app.css arquivo com o conteúdo do app.css arquivo de este repositório GitHub.

Agora é hora de definir as rotas. O caminho do nível raiz deve renderizar o Lar componente, enquanto "/find/:word" deve renderizar o Significado componente.

<Rotacaminho="/"componente={Lar} />
<Rotacaminho="/encontrar/:palavra"deixe: parâmetros>
<Significadopalavra={params.palavra} />
Rota>

Este bloco de código usa o deixar diretiva para passar o parâmetro "word" para o Significado componente como um prop.

Agora, abra o Home.svelte arquivo e importar o navegar utilitário da biblioteca "svelte-routing" e defina uma variável palavra digitada.

<roteiro>
 import {navegar} de "svelte-routing";
 deixe entrarPalavra;
roteiro>

Debaixo de roteiro tag, crie um elemento principal com a classe "homepage", então crie um div elemento com a classe "texto-dicionário".

<principalaula="pagina inicial">
<divaula="dicionário-texto">Dicionáriodiv>
principal>

Em seguida, crie um formulário com um em: enviar diretiva. Este formulário deve conter dois filhos: um entrada elemento cujo valor está vinculado ao palavra digitada variável e um botão de envio que é renderizado condicionalmente assim que o usuário começa a digitar:

<formaem: enviar|preventDefault={() => navegue(`/find/${enteredWord.toLowerCase()}`)}>
<entrada
 digite="texto"
 vincular: valor={enteredWord}
 placeholder="Inicie sua busca..."
 auto-foco
 />
 {#if digitadoPalavra}
<botãotipo="enviar">Pesquisar palavrabotão>
 {/se}
forma>

Este bloco de código usa o navegar função para redirecionar o usuário assim que a ação de envio for concluída. Agora, abra o Significado.svelte arquivo e, na tag script, exporte o palavra prop e criar um mensagem de erro variável:

exportação deixe palavra;
let errorMessage = "Sem conexão. Verifique sua internet";

Em seguida, faça uma solicitação GET para a API Dictionary passando o palavra como parâmetro:

assíncronofunçãoobter significado da palavra(palavra) {
const resposta = aguardam buscar(
` https://api.dictionaryapi.dev/api/v2/entries/en/${palavra}`
 );
const json = aguardam resposta.json();
console.log (json);
se (resposta.ok) {
retornar json;
 } outro {
 mensagem de erro = json.message;
lançarnovoErro(json);
 }
 }
deixar promessa = getWordMeaning (palavra);

No bloco de código acima, a função assíncrona retorna os dados JSON se a resposta for bem-sucedida. A variável de promessa representa o resultado da obter significado da palavra função quando invocado.

Na marcação, defina um div com a classe página de significado. Em seguida, defina um elemento h1 que contém o palavra variável em minúsculas:

<divaula="página de significado">
<h1>
 {palavra.toLowerCase()}
h1>
div>

Em seguida, use os blocos await de Svelte para chamar o obter significado da palavra função:

{#aguardo promessa}
<p>Carregando...p>
{:então entradas}
{:pegar}
 {mensagem de erro}
{/aguardam}

Este código exibe o Carregando... texto quando a solicitação GET é feita à API. Se houver um erro, ele mostrará o conteúdo de mensagem de erro.

No {:então entradas} bloco, adicione o seguinte:

{#cada entrada como entrada}
 {#cada entrada.significados como significado}
<divaula="entrada">
<divaula="parte do discurso">
 {meaning.partOfSpeech}
div>
<olá>
 {#cada significado.definições como definição}
<li>
 {definição.definição}
<br />
<divaula="exemplo">
 {#ifdefinição.exemplo}
 {definição.exemplo}
 {/se}
div>
li>
 {/cada}
olá>
div>
 {/cada}
{/cada}

Se a promessa for resolvida com sucesso, o entradas variável contém os dados resultantes.

Então, para cada iteração de entrada e significado, esse código renderiza a classe gramatical usando meaning.partOfSpeech e uma lista de definições usando definição.definição. Ele também renderizará uma frase de exemplo, se houver uma disponível.

É isso. Você criou um dicionário Single Page Application (SPA) usando svelte-routing. Você pode levar as coisas adiante, se quiser, ou pode verificar navegador esbelto, um garfo de roteamento esbelto.

Melhorando a experiência do usuário com o roteamento do lado do cliente

Há muitos benefícios em lidar com o roteamento no navegador em vez do servidor. Os aplicativos que usam roteamento do lado do cliente podem parecer mais suaves para o usuário final, especialmente quando combinados com animações e transições.

No entanto, se você deseja que seu site tenha uma classificação mais alta nos mecanismos de pesquisa, considere o gerenciamento de rotas no servidor.