Solid Router: Obvladovanje odjemalske navigacije v SolidJS

SolidJS, znan po svoji izjemni zmogljivosti in enostavnosti, predstavlja fantastično osnovo za gradnjo sodobnih spletnih aplikacij. Za ustvarjanje resnično privlačnih in uporabniku prijaznih izkušenj je nujen robusten odjemalski usmerjevalnik. Tukaj nastopi Solid Router, uradni in priporočeni usmerjevalnik za SolidJS, zasnovan za brezhibno integracijo z reaktivnimi načeli ogrodja.

Ta obsežen vodnik se bo poglobil v svet Solid Routerja in zajel vse od osnovne nastavitve do naprednih tehnik za gradnjo kompleksnih in dinamičnih enostranskih aplikacij (SPA). Ne glede na to, ali ste izkušen razvijalec SolidJS ali šele začenjate, vas bo ta članek opremil z znanjem in veščinami za obvladovanje odjemalske navigacije.

Kaj je Solid Router?

Solid Router je lahek in zmogljiv odjemalski usmerjevalnik, posebej zasnovan za SolidJS. Izkorišča reaktivnost ogrodja SolidJS za učinkovito posodabljanje uporabniškega vmesnika na podlagi sprememb v URL-ju brskalnika. Za razliko od tradicionalnih usmerjevalnikov, ki se zanašajo na primerjavo virtualnega DOM-a, Solid Router neposredno manipulira z DOM-om, kar zagotavlja hitrejše in bolj predvidljivo delovanje.

Ključne značilnosti Solid Routerja vključujejo:

• Deklarativno usmerjanje: Določite svoja pota z uporabo preprostega in intuitivnega API-ja, ki temelji na JSX.
• Dinamično usmerjanje: Enostavno upravljajte pota s parametri, kar vam omogoča ustvarjanje dinamičnih in podatkovno vodenih aplikacij.
• Gnezdena pota: Organizirajte svojo aplikacijo v logične odseke z gnezdenimi potmi.
• Komponenta Link: Brezhibno se pomikajte med potmi z uporabo komponente <A>, ki samodejno skrbi za posodobitve URL-ja in stil aktivne povezave.
• Nalaganje podatkov: Asinhrono naložite podatke pred izrisom poti in tako zagotovite tekočo uporabniško izkušnjo.
• Prehodi: Ustvarite vizualno privlačne prehode med potmi za izboljšanje uporabniške izkušnje.
• Obravnava napak: Elegantno obravnavajte napake in prikažite strani z napakami po meri.
• Integracija z History API: Brezhibno se integrira z brskalnikovim History API-jem, kar uporabnikom omogoča uporabo gumbov za nazaj in naprej.

Kako začeti s Solid Routerjem

Namestitev

Za namestitev Solid Routerja uporabite svoj priljubljeni upravitelj paketov:

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

              
                Copy
              
            
          

Osnovna nastavitev

Jedro Solid Routerja se vrti okoli komponent <Router> in <Route>. Komponenta <Router> deluje kot koren sistema usmerjanja vaše aplikacije, medtem ko komponente <Route> določajo preslikavo med URL-ji in komponentami.

Tukaj je osnovni primer:

            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
              
            
          

V tem primeru komponenta <Router> ovija celotno aplikacijo. Komponenti <Route> določata dve poti: eno za korensko pot ("/") in drugo za pot "/about". Ko uporabnik obišče eno od teh poti, se bo izrisala ustrezna komponenta (Home ali About).

Komponenta <A>

Za navigacijo med potmi uporabite komponento <A>, ki jo ponuja Solid Router. Ta komponenta je podobna običajni HTML oznaki <a>, vendar samodejno upravlja posodobitve URL-ja in preprečuje ponovno nalaganje celotne strani.

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

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

export default Navigation;
            

              
                Copy
              
            
          

Ko uporabnik klikne eno od teh povezav, bo Solid Router posodobil URL brskalnika in izrisal ustrezno komponento, ne da bi sprožil ponovno nalaganje celotne strani.

Napredne tehnike usmerjanja

Dinamično usmerjanje s parametri poti

Solid Router podpira dinamično usmerjanje, kar vam omogoča ustvarjanje poti s parametri. To je uporabno za prikazovanje vsebine na podlagi določenega ID-ja ali "sluga".

            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
              
            
          

V tem primeru je segment :id v poti parameter poti. Za dostop do vrednosti parametra id znotraj komponente UserProfile lahko uporabite kavelj (hook) useParams:

            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
              
            
          

Kavelj useParams vrne objekt, ki vsebuje parametre poti. V tem primeru bo params.id vseboval vrednost parametra id iz URL-ja. Kavelj createResource se nato uporabi za pridobivanje podatkov o uporabniku na podlagi ID-ja.

Mednarodni primer: Predstavljajte si globalno platformo za e-trgovino. Dinamično usmerjanje bi lahko uporabili za prikaz podrobnosti izdelka na podlagi ID-ja izdelka: /products/:productId. To vam omogoča enostavno ustvarjanje edinstvenih URL-jev za vsak izdelek, kar uporabnikom, ne glede na njihovo lokacijo, olajša deljenje in shranjevanje določenih artiklov med zaznamke.

Gnezdena pota

Gnezdena pota vam omogočajo organizacijo aplikacije v logične odseke. To je še posebej uporabno za kompleksne aplikacije z več nivoji navigacije.

            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
              
            
          

V tem primeru komponenta <Dashboard> deluje kot vsebnik za komponenti <Profile> in <Settings>. Poti <Profile> in <Settings> sta gnezdeni znotraj poti <Dashboard>, kar pomeni, da bosta izrisani le, ko je uporabnik na poti "/dashboard".

Za izris gnezdenih poti znotraj komponente <Dashboard> morate uporabiti komponento <Outlet>:

            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
              
            
          

Komponenta <Outlet> deluje kot označba mesta, kjer se bodo izrisala gnezdena pota. Ko uporabnik odpre "/dashboard/profile", bo komponenta <Profile> izrisana znotraj komponente <Outlet>. Podobno se bo, ko uporabnik odpre "/dashboard/settings", znotraj komponente <Outlet> izrisala komponenta <Settings>.

Nalaganje podatkov s createResource

Asinhrono nalaganje podatkov pred izrisom poti je ključno za zagotavljanje tekoče uporabniške izkušnje. Solid Router se brezhibno integrira s kavljem createResource ogrodja SolidJS, kar nalaganje podatkov naredi izjemno enostavno.

Primer tega smo že videli v komponenti UserProfile, a za večjo jasnost ga ponovno navajamo:

            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
              
            
          

Kavelj createResource sprejme dva argumenta: signal, ki sproži nalaganje podatkov, in funkcijo, ki podatke pridobi. V tem primeru je signal () => params.id, kar pomeni, da se bodo podatki pridobili vsakič, ko se parameter id spremeni. Funkcija fetchUser pridobi podatke o uporabniku iz API-ja na podlagi ID-ja.

Kavelj createResource vrne polje, ki vsebuje vir (pridobljene podatke) in funkcijo za ponovno pridobitev podatkov. Vir je signal, ki hrani podatke. Do podatkov dostopate s klicem signala (user()). Če se podatki še nalagajo, bo signal vrnil undefined. To vam omogoča, da med pridobivanjem podatkov prikažete indikator nalaganja.

Prehodi

Dodajanje prehodov med potmi lahko znatno izboljša uporabniško izkušnjo. Čeprav Solid Router nima vgrajene podpore za prehode, se dobro integrira s knjižnicami, kot je solid-transition-group, za doseganje tekočih in vizualno privlačnih prehodov.

Najprej namestite paket solid-transition-group:

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

              
                Copy
              
            
          

Nato ovijte svoja pota s komponento <TransitionGroup>:

            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
              
            
          

V tem primeru je vsaka pot ovita s komponento <Transition>. Rekvizit name določa predpono razreda CSS za prehod, rekvizit duration pa določa trajanje prehoda v milisekundah.

V svoji slogovni datoteki boste morali določiti ustrezne razrede CSS za prehod:

            .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
              
            
          

Ta koda CSS določa preprost prehod z bledenjem. Ko se pot prikaže, se uporabita razreda .fade-enter in .fade-enter-active, kar povzroči, da se komponenta postopoma prikaže. Ko se pot zapusti, se uporabita razreda .fade-exit in .fade-exit-active, kar povzroči, da komponenta postopoma zbledi.

Obravnava napak

Elegantno obravnavanje napak je ključno za dobro uporabniško izkušnjo. Solid Router nima vgrajenega sistema za obravnavo napak, vendar ga lahko enostavno implementirate z uporabo globalne meje napak (error boundary) ali obravnavatelja napak za posamezno pot.

Tukaj je primer globalne meje napak:

            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
              
            
          

Komponenta <ErrorBoundary> ujame vse napake, ki se pojavijo znotraj njenih otrok. Rekvizit fallback določa komponento, ki se izriše, ko pride do napake. V tem primeru izriše odstavek s sporočilom o napaki.

Komponenta <Suspense> obravnava čakajoče obljube (promises), ki se običajno uporabljajo pri asinhronih komponentah ali nalaganju podatkov. Prikazuje rekvizit `fallback`, dokler se obljube ne razrešijo.

Če želite sprožiti napako, lahko znotraj komponente vržete izjemo:

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

  return <h1>Home</h1>;
}

export default Home;
            

              
                Copy
              
            
          

Ko se ta koda izvede, bo komponenta <ErrorBoundary> ujela napako in izrisala nadomestno komponento.

Mednarodni vidiki: Pri prikazovanju sporočil o napakah upoštevajte internacionalizacijo (i18n). Uporabite knjižnico za prevajanje, da zagotovite sporočila o napakah v uporabnikovem želenem jeziku. Na primer, če uporabnik na Japonskem naleti na napako, bi moral videti sporočilo o napaki v japonščini, ne v angleščini.

Najboljše prakse za uporabo Solid Routerja

• Organizirajte svoja pota: Uporabite gnezdena pota za organizacijo aplikacije v logične odseke. To bo olajšalo vzdrževanje in navigacijo po vaši kodi.
• Uporabite parametre poti za dinamično vsebino: Uporabite parametre poti za ustvarjanje dinamičnih URL-jev za prikaz vsebine na podlagi določenega ID-ja ali "sluga".
• Asinhrono nalagajte podatke: Podatke nalagajte asinhrono pred izrisom poti, da zagotovite tekočo uporabniško izkušnjo.
• Dodajte prehode med potmi: Uporabite prehode za izboljšanje uporabniške izkušnje in da bo vaša aplikacija delovala bolj dovršeno.
• Elegantno obravnavajte napake: Implementirajte obravnavo napak za zajemanje in prikazovanje napak na uporabniku prijazen način.
• Uporabljajte opisna imena poti: Izberite imena poti, ki natančno odražajo vsebino poti. To bo olajšalo razumevanje strukture vaše aplikacije.
• Testirajte svoja pota: Napišite enotske teste, da zagotovite pravilno delovanje vaših poti. To vam bo pomagalo zgodaj odkriti napake in preprečiti regresije.

Zaključek

Solid Router je zmogljiv in prilagodljiv odjemalski usmerjevalnik, ki se brezhibno integrira s SolidJS. Z obvladovanjem njegovih funkcij in upoštevanjem najboljših praks lahko zgradite kompleksne in dinamične enostranske aplikacije, ki zagotavljajo tekočo in privlačno uporabniško izkušnjo. Od osnovne nastavitve do naprednih tehnik, kot so dinamično usmerjanje, nalaganje podatkov in prehodi, vam je ta vodnik zagotovil znanje in veščine za samozavestno navigacijo po svetu odjemalske navigacije v SolidJS. Sprejmite moč Solid Routerja in sprostite polni potencial vaših aplikacij SolidJS!

Ne pozabite pregledati uradne dokumentacije Solid Routerja za najnovejše informacije in primere: [Povezava do dokumentacije Solid Routerja - označba mesta]

Nadaljujte z ustvarjanjem izjemnih stvari s SolidJS!