Solid Router: Mestring av Klient-Side Navigasjon i SolidJS

SolidJS, kjent for sin eksepsjonelle ytelse og enkelhet, gir et fantastisk grunnlag for å bygge moderne webapplikasjoner. For å skape virkelig engasjerende og brukervennlige opplevelser, er en robust klient-side ruter essensiell. Her kommer Solid Router, den offisielle og anbefalte ruteren for SolidJS, designet for å integreres sømløst med rammeverkets reaktive prinsipper.

Denne omfattende guiden vil dykke ned i verdenen til Solid Router, og dekke alt fra grunnleggende oppsett til avanserte teknikker for å bygge komplekse og dynamiske ett-siders applikasjoner (SPA-er). Enten du er en erfaren SolidJS-utvikler eller nettopp har startet, vil denne artikkelen utstyre deg med kunnskapen og ferdighetene til å mestre klient-side navigasjon.

Hva er Solid Router?

Solid Router er en lettvektig og ytelsessterk klient-side ruter spesifikt designet for SolidJS. Den utnytter SolidJS's reaktivitet for å effektivt oppdatere brukergrensesnittet basert på endringer i nettleserens URL. I motsetning til tradisjonelle rutere som er avhengige av virtuell DOM-diffing, manipulerer Solid Router DOM-en direkte, noe som resulterer i raskere og mer forutsigbar ytelse.

Nøkkelfunksjoner i Solid Router inkluderer:

• Deklarativ Ruting: Definer rutene dine ved hjelp av en enkel og intuitiv JSX-basert API.
• Dynamisk Ruting: Håndter enkelt ruter med parametere, slik at du kan lage dynamiske og datadrevne applikasjoner.
• Nestede Ruter: Organiser applikasjonen din i logiske seksjoner med nestede ruter.
• Link-komponent: Naviger sømløst mellom ruter ved hjelp av <A>-komponenten, som automatisk håndterer URL-oppdateringer og styling av aktive lenker.
• Datainnlasting: Last inn data asynkront før du gjengir en rute, for å sikre en jevn brukeropplevelse.
• Overganger: Lag visuelt tiltalende overganger mellom ruter for å forbedre brukeropplevelsen.
• Feilhåndtering: Håndter feil på en elegant måte og vis tilpassede feilsider.
• History API-integrasjon: Integreres sømløst med nettleserens History API, slik at brukere kan navigere med tilbake- og frem-knappene.

Kom i gang med Solid Router

Installasjon

For å installere Solid Router, bruk din foretrukne pakkebehandler:

            npm install @solidjs/router
yarn add @solidjs/router
pnpm add @solidjs/router
            

              
                Copy
              
            
          

Grunnleggende Oppsett

Kjernen i Solid Router dreier seg om <Router>- og <Route>-komponentene. <Router>-komponenten fungerer som roten til applikasjonens rutingsystem, mens <Route>-komponentene definerer koblingen mellom URL-er og komponenter.

Her er et grunnleggende eksempel:

            import { Router, Route } from '@solidjs/router';
import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    <Router>
      <Route path="/"> <Home/> </Route>
      <Route path="/about"> <About/> </Route>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

I dette eksempelet omslutter <Router>-komponenten hele applikasjonen. <Route>-komponentene definerer to ruter: en for rotstien ("/") og en annen for "/about"-stien. Når brukeren navigerer til en av disse stiene, vil den tilsvarende komponenten (Home eller About) bli gjengitt.

<A>-komponenten

For å navigere mellom ruter, bruk <A>-komponenten som leveres av Solid Router. Denne komponenten ligner på en vanlig HTML <a>-tag, men den håndterer automatisk URL-oppdateringer og forhindrer fullstendige sideoppdateringer.

            import { A } from '@solidjs/router';

function Navigation() {
  return (
    <nav>
      <A href="/">Home</A>
      <A href="/about">About</A>
    </nav>
  );
}

export default Navigation;
            

              
                Copy
              
            
          

Når brukeren klikker på en av disse lenkene, vil Solid Router oppdatere nettleserens URL og gjengi den tilsvarende komponenten uten å utløse en fullstendig sideoppdatering.

Avanserte Rutingsteknikker

Dynamisk Ruting med Ruteparametere

Solid Router støtter dynamisk ruting, noe som lar deg lage ruter med parametere. Dette er nyttig for å vise innhold basert på en spesifikk ID eller slug.

            import { Router, Route } from '@solidjs/router';
import UserProfile from './components/UserProfile';

function App() {
  return (
    <Router>
      <Route path="/users/:id"> <UserProfile/> </Route>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

I dette eksempelet er :id-segmentet i stien en ruteparameter. For å få tilgang til verdien av id-parameteren i UserProfile-komponenten, kan du bruke useParams-hooken:

            import { useParams } from '@solidjs/router';
import { createResource } from 'solid-js';

function UserProfile() {
  const params = useParams();
  const [user] = createResource(() => params.id, fetchUser);

  return (
    <div>
      <h1>User Profile</h1>
      {user() ? (
        <div>
          <p>Name: {user().name}</p>
          <p>Email: {user().email}</p>
        </div>
      ) : (<p>Loading...</p>)}
    </div>
  );
}

async function fetchUser(id: string) {
  const response = await fetch(`https://api.example.com/users/${id}`);
  return response.json();
}

export default UserProfile;
            

              
                Copy
              
            
          

useParams-hooken returnerer et objekt som inneholder ruteparameterne. I dette tilfellet vil params.id inneholde verdien av id-parameteren fra URL-en. createResource-hooken brukes deretter til å hente brukerdata basert på ID-en.

Internasjonalt Eksempel: Se for deg en global e-handelsplattform. Du kan bruke dynamisk ruting for å vise produktdetaljer basert på produkt-ID-en: /products/:productId. Dette lar deg enkelt lage unike URL-er for hvert produkt, noe som gjør det enklere for brukere å dele og bokmerke spesifikke varer, uavhengig av hvor de befinner seg.

Nestede Ruter

Nestede ruter lar deg organisere applikasjonen din i logiske seksjoner. Dette er spesielt nyttig for komplekse applikasjoner med flere navigasjonsnivåer.

            import { Router, Route } from '@solidjs/router';
import Dashboard from './components/Dashboard';
import Profile from './components/Profile';
import Settings from './components/Settings';

function App() {
  return (
    <Router>
      <Route path="/dashboard">
        <Dashboard/>
        <Route path="/profile"> <Profile/> </Route>
        <Route path="/settings"> <Settings/> </Route>
      </Route>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

I dette eksempelet fungerer <Dashboard>-komponenten som en beholder for <Profile>- og <Settings>-komponentene. <Profile>- og <Settings>-rutene er nestet innenfor <Dashboard>-ruten, noe som betyr at de bare vil bli gjengitt når brukeren er på "/dashboard"-stien.

For å gjengi de nestede rutene i <Dashboard>-komponenten, må du bruke <Outlet>-komponenten:

            import { Outlet } from '@solidjs/router';

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <nav>
        <A href="/dashboard/profile">Profile</A>
        <A href="/dashboard/settings">Settings</A>
      </nav>
      <Outlet/>
    </div>
  );
}

export default Dashboard;
            

              
                Copy
              
            
          

<Outlet>-komponenten fungerer som en plassholder der de nestede rutene vil bli gjengitt. Når brukeren navigerer til "/dashboard/profile", vil <Profile>-komponenten bli gjengitt i <Outlet>-komponenten. På samme måte, når brukeren navigerer til "/dashboard/settings", vil <Settings>-komponenten bli gjengitt i <Outlet>-komponenten.

Datainnlasting med createResource

Asynkron innlasting av data før en rute gjengis er avgjørende for å gi en jevn brukeropplevelse. Solid Router integreres sømløst med SolidJS's createResource-hook, noe som gjør datainnlasting til en lek.

Vi så et eksempel på dette i UserProfile-komponenten tidligere, men her er det igjen for tydelighetens skyld:

            import { useParams } from '@solidjs/router';
import { createResource } from 'solid-js';

function UserProfile() {
  const params = useParams();
  const [user] = createResource(() => params.id, fetchUser);

  return (
    <div>
      <h1>User Profile</h1>
      {user() ? (
        <div>
          <p>Name: {user().name}</p>
          <p>Email: {user().email}</p>
        </div>
      ) : (<p>Loading...</p>)}
    </div>
  );
}

async function fetchUser(id: string) {
  const response = await fetch(`https://api.example.com/users/${id}`);
  return response.json();
}

export default UserProfile;
            

              
                Copy
              
            
          

createResource-hooken tar to argumenter: et signal som utløser datainnlastingen og en funksjon som henter dataene. I dette tilfellet er signalet () => params.id, noe som betyr at dataene vil bli hentet hver gang id-parameteren endres. fetchUser-funksjonen henter brukerdata fra en API basert på ID-en.

createResource-hooken returnerer en matrise som inneholder ressursen (de hentede dataene) og en funksjon for å hente dataene på nytt. Ressursen er et signal som holder på dataene. Du kan få tilgang til dataene ved å kalle signalet (user()). Hvis dataene fortsatt lastes, vil signalet returnere undefined. Dette lar deg vise en lasteindikator mens dataene hentes.

Overganger

Å legge til overganger mellom ruter kan forbedre brukeropplevelsen betydelig. Selv om Solid Router ikke har innebygd støtte for overganger, integreres den godt med biblioteker som solid-transition-group for å oppnå jevne og visuelt tiltalende overganger.

Først, installer solid-transition-group-pakken:

            npm install solid-transition-group
yarn add solid-transition-group
pnpm add solid-transition-group
            

              
                Copy
              
            
          

Deretter, omslutt rutene dine med <TransitionGroup>-komponenten:

            import { Router, Route } from '@solidjs/router';
import { TransitionGroup, Transition } from 'solid-transition-group';
import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    <Router>
      <TransitionGroup>
        <Route path="/">
          <Transition name="fade" duration={300}>
            <Home/>
          </Transition>
        </Route>
        <Route path="/about">
          <Transition name="fade" duration={300}>
            <About/>
          </Transition>
        </Route>
      </TransitionGroup>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

I dette eksempelet er hver rute omsluttet av en <Transition>-komponent. name-propen spesifiserer CSS-klasseprefikset for overgangen, og duration-propen spesifiserer varigheten av overgangen i millisekunder.

Du må definere de tilsvarende CSS-klassene for overgangen i stilarket ditt:

            .fade-enter {
  opacity: 0;
}

.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms ease-in;
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms ease-out;
}
            

              
                Copy
              
            
          

Denne CSS-koden definerer en enkel inn- og uttoningsovergang. Når en rute trer inn, blir .fade-enter- og .fade-enter-active-klassene brukt, noe som får komponenten til å tones inn. Når en rute forlates, blir .fade-exit- og .fade-exit-active-klassene brukt, noe som får komponenten til å tones ut.

Feilhåndtering

Å håndtere feil på en elegant måte er essensielt for å gi en god brukeropplevelse. Solid Router har ikke innebygd feilhåndtering, men du kan enkelt implementere det ved hjelp av en global feilgrense (error boundary) eller en rutespesifikk feilhåndterer.

Her er et eksempel på en global feilgrense:

            import { createSignal, Suspense, ErrorBoundary } from 'solid-js';
import { Router, Route } from '@solidjs/router';
import Home from './components/Home';
import About from './components/About';

function App() {
  const [error, setError] = createSignal(null);

  return (
    <ErrorBoundary fallback={<p>Something went wrong: {error()?.message}</p>}>
      <Suspense fallback={<p>Loading...</p>}>
        <Router>
          <Route path="/"> <Home/> </Route>
          <Route path="/about"> <About/> </Route>
        </Router>
      </Suspense>
    </ErrorBoundary>
  );
}

export default App;
            

              
                Copy
              
            
          

<ErrorBoundary>-komponenten fanger opp eventuelle feil som oppstår i dens barn. fallback-propen spesifiserer komponenten som skal gjengis når en feil oppstår. I dette tilfellet gjengir den et avsnitt med feilmeldingen.

<Suspense>-komponenten håndterer ventende promises, vanligvis brukt med asynkrone komponenter eller datainnlasting. Den viser `fallback`-propen til promises er løst.

For å utløse en feil, kan du kaste et unntak i en komponent:

            function Home() {
  throw new Error('Failed to load home page');

  return <h1>Home</h1>;
}

export default Home;
            

              
                Copy
              
            
          

Når denne koden kjøres, vil <ErrorBoundary>-komponenten fange opp feilen og gjengi fallback-komponenten.

Internasjonale Hensyn: Når du viser feilmeldinger, bør du vurdere internasjonalisering (i18n). Bruk et oversettelsesbibliotek for å gi feilmeldinger på brukerens foretrukne språk. For eksempel, hvis en bruker i Japan støter på en feil, bør de se feilmeldingen på japansk, ikke engelsk.

Beste Praksis for Bruk av Solid Router

• Hold rutene dine organisert: Bruk nestede ruter for å organisere applikasjonen din i logiske seksjoner. Dette vil gjøre det enklere å vedlikeholde og navigere i koden din.
• Bruk ruteparametere for dynamisk innhold: Bruk ruteparametere for å lage dynamiske URL-er for å vise innhold basert på en spesifikk ID eller slug.
• Last data asynkront: Last data asynkront før du gjengir en rute for å gi en jevn brukeropplevelse.
• Legg til overganger mellom ruter: Bruk overganger for å forbedre brukeropplevelsen og få applikasjonen din til å føles mer polert.
• Håndter feil på en elegant måte: Implementer feilhåndtering for å fange opp og vise feil på en brukervennlig måte.
• Bruk beskrivende rutenavn: Velg rutenavn som nøyaktig gjenspeiler innholdet i ruten. Dette vil gjøre det lettere å forstå applikasjonens struktur.
• Test rutene dine: Skriv enhetstester for å sikre at rutene dine fungerer som de skal. Dette vil hjelpe deg med å fange feil tidlig og forhindre regresjoner.

Konklusjon

Solid Router er en kraftig og fleksibel klient-side ruter som integreres sømløst med SolidJS. Ved å mestre dens funksjoner og følge beste praksis, kan du bygge komplekse og dynamiske ett-siders applikasjoner som gir en jevn og engasjerende brukeropplevelse. Fra grunnleggende oppsett til avanserte teknikker som dynamisk ruting, datainnlasting og overganger, har denne guiden gitt deg kunnskapen og ferdighetene til å trygt navigere i verdenen av klient-side navigasjon i SolidJS. Omfavn kraften til Solid Router og lås opp det fulle potensialet i dine SolidJS-applikasjoner!

Husk å konsultere den offisielle Solid Router-dokumentasjonen for den mest oppdaterte informasjonen og eksemplene: [Lenke til Solid Router-dokumentasjon - Plassholder]

Fortsett å bygge fantastiske ting med SolidJS!