Solid Router: A kliensoldali navigáció mesterfogásai SolidJS-ben

A SolidJS, amely kivételes teljesítményéről és egyszerűségéről ismert, fantasztikus alapot nyújt modern webalkalmazások építéséhez. Az igazán lebilincselő és felhasználóbarát élmények megteremtéséhez elengedhetetlen egy robusztus kliensoldali router. Itt lép a képbe a Solid Router, a SolidJS hivatalos és ajánlott routere, amelyet úgy terveztek, hogy zökkenőmentesen integrálódjon a keretrendszer reaktív elveivel.

Ez az átfogó útmutató bemutatja a Solid Router világát, az alapvető beállításoktól kezdve a komplex és dinamikus egyoldalas alkalmazások (SPA-k) építéséhez szükséges haladó technikákig mindent lefedve. Akár tapasztalt SolidJS fejlesztő, akár csak most kezd ismerkedni a témával, ez a cikk felvértezi Önt a kliensoldali navigáció elsajátításához szükséges tudással és készségekkel.

Mi az a Solid Router?

A Solid Router egy könnyűsúlyú és nagy teljesítményű kliensoldali router, amelyet kifejezetten a SolidJS-hez terveztek. A SolidJS reaktivitását kihasználva hatékonyan frissíti a felhasználói felületet a böngésző URL-jében bekövetkező változások alapján. A hagyományos, virtuális DOM összehasonlításra támaszkodó routerekkel ellentétben a Solid Router közvetlenül manipulálja a DOM-ot, ami gyorsabb és kiszámíthatóbb teljesítményt eredményez.

A Solid Router főbb jellemzői:

• Deklaratív útválasztás: Definiálja útvonalait egy egyszerű és intuitív, JSX-alapú API segítségével.
• Dinamikus útválasztás: Kezelje könnyedén a paraméterekkel rendelkező útvonalakat, lehetővé téve dinamikus és adatvezérelt alkalmazások létrehozását.
• Beágyazott útvonalak: Rendszerezze alkalmazását logikai szekciókba beágyazott útvonalakkal.
• Link komponens: Navigáljon zökkenőmentesen az útvonalak között az <A> komponens segítségével, amely automatikusan kezeli az URL-frissítéseket és az aktív linkek stílusát.
• Adatbetöltés: Töltsön be adatokat aszinkron módon egy útvonal renderelése előtt, biztosítva a zökkenőmentes felhasználói élményt.
• Átmenetek: Hozzon létre vizuálisan tetszetős átmeneteket az útvonalak között a felhasználói élmény javítása érdekében.
• Hibakezelés: Kezelje elegánsan a hibákat és jelenítsen meg egyedi hibaoldalakat.
• History API integráció: Zökkenőmentesen integrálódik a böngésző History API-jával, lehetővé téve a felhasználók számára a vissza és előre gombokkal való navigációt.

Első lépések a Solid Routerrel

Telepítés

A Solid Router telepítéséhez használja a preferált csomagkezelőjét:

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

              
                Copy
              
            
          

Alapvető beállítások

A Solid Router magját a <Router> és <Route> komponensek alkotják. A <Router> komponens az alkalmazás útválasztási rendszerének gyökereként funkcionál, míg a <Route> komponensek határozzák meg az URL-ek és a komponensek közötti leképezést.

Íme egy alapvető példa:

            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
              
            
          

Ebben a példában a <Router> komponens az egész alkalmazást körbeveszi. A <Route> komponensek két útvonalat határoznak meg: egyet a gyökérútvonalhoz ("/") és egy másikat a "/about" útvonalhoz. Amikor a felhasználó ezen útvonalak bármelyikére navigál, a megfelelő komponens (Home vagy About) fog renderelődni.

Az <A> komponens

Az útvonalak közötti navigációhoz használja a Solid Router által biztosított <A> komponenst. Ez a komponens hasonlít egy hagyományos HTML <a> címkéhez, de automatikusan kezeli az URL-frissítéseket és megakadályozza a teljes oldalas újratöltéseket.

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

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

export default Navigation;
            

              
                Copy
              
            
          

Amikor a felhasználó rákattint ezen linkek egyikére, a Solid Router frissíti a böngésző URL-jét és rendereli a megfelelő komponenst anélkül, hogy teljes oldalas újratöltést indítana.

Haladó útválasztási technikák

Dinamikus útválasztás útvonalparaméterekkel

A Solid Router támogatja a dinamikus útválasztást, lehetővé téve paraméterekkel rendelkező útvonalak létrehozását. Ez hasznos egy adott azonosító vagy "slug" alapján történő tartalommegjelenítéshez.

            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
              
            
          

Ebben a példában az útvonalban lévő :id szegmens egy útvonalparaméter. Az id paraméter értékének eléréséhez a UserProfile komponensen belül használhatja a useParams hookot:

            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
              
            
          

A useParams hook egy objektumot ad vissza, amely tartalmazza az útvonalparamétereket. Ebben az esetben a params.id az URL-ből származó id paraméter értékét fogja tartalmazni. A createResource hookot ezután a felhasználói adatok lekérésére használjuk az azonosító alapján.

Nemzetközi példa: Képzeljen el egy globális e-kereskedelmi platformot. Használhatna dinamikus útválasztást a termékadatok megjelenítéséhez a termékazonosító alapján: /products/:productId. Ez lehetővé teszi, hogy könnyen hozzon létre egyedi URL-eket minden termékhez, megkönnyítve a felhasználók számára, hogy megosszák és könyvjelzők közé tegyék az egyes tételeket, tartózkodási helyüktől függetlenül.

Beágyazott útvonalak

A beágyazott útvonalak lehetővé teszik, hogy alkalmazását logikai szekciókba rendezze. Ez különösen hasznos komplex, többszintű navigációval rendelkező alkalmazásoknál.

            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
              
            
          

Ebben a példában a <Dashboard> komponens konténerként funkcionál a <Profile> és <Settings> komponensek számára. A <Profile> és <Settings> útvonalak a <Dashboard> útvonalba vannak ágyazva, ami azt jelenti, hogy csak akkor renderelődnek, ha a felhasználó a "/dashboard" útvonalon van.

A beágyazott útvonalak rendereléséhez a <Dashboard> komponensen belül az <Outlet> komponenst kell használnia:

            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
              
            
          

Az <Outlet> komponens helyőrzőként funkcionál, ahol a beágyazott útvonalak renderelődni fognak. Amikor a felhasználó a "/dashboard/profile" útvonalra navigál, a <Profile> komponens az <Outlet> komponensen belül fog renderelődni. Hasonlóképpen, amikor a felhasználó a "/dashboard/settings" útvonalra navigál, a <Settings> komponens fog renderelődni az <Outlet> komponensen belül.

Adatbetöltés a createResource segítségével

Az adatok aszinkron betöltése egy útvonal renderelése előtt kulcsfontosságú a zökkenőmentes felhasználói élmény biztosításához. A Solid Router zökkenőmentesen integrálódik a SolidJS createResource hookjával, ami gyerekjátékká teszi az adatbetöltést.

Láttunk már erre egy példát korábban a UserProfile komponensben, de a tisztázás kedvéért itt van újra:

            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
              
            
          

A createResource hook két argumentumot fogad el: egy szignált, amely elindítja az adatbetöltést, és egy függvényt, amely lekéri az adatokat. Ebben az esetben a szignál () => params.id, ami azt jelenti, hogy az adatok minden alkalommal lekérésre kerülnek, amikor az id paraméter megváltozik. A fetchUser függvény egy API-ból kéri le a felhasználói adatokat az azonosító alapján.

A createResource hook egy tömböt ad vissza, amely tartalmazza az erőforrást (a lekért adatokat) és egy függvényt az adatok újbóli lekéréséhez. Az erőforrás egy szignál, amely az adatokat tárolja. Az adatokhoz a szignál meghívásával (user()) férhet hozzá. Ha az adatok még töltődnek, a szignál undefined értéket ad vissza. Ez lehetővé teszi egy töltésjelző megjelenítését, amíg az adatok lekérése folyamatban van.

Átmenetek

Az útvonalak közötti átmenetek hozzáadása jelentősen javíthatja a felhasználói élményt. Bár a Solid Router nem rendelkezik beépített átmenet-támogatással, jól integrálható olyan könyvtárakkal, mint a solid-transition-group a sima és vizuálisan tetszetős átmenetek eléréséhez.

Először telepítse a solid-transition-group csomagot:

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

              
                Copy
              
            
          

Ezután csomagolja be az útvonalait a <TransitionGroup> komponenssel:

            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
              
            
          

Ebben a példában minden útvonal egy <Transition> komponensbe van csomagolva. A name tulajdonság határozza meg az átmenet CSS osztályának előtagját, a duration tulajdonság pedig az átmenet időtartamát milliszekundumban.

A megfelelő CSS osztályokat meg kell határoznia az átmenethez a stíluslapjában:

            .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
              
            
          

Ez a CSS kód egy egyszerű be- és kiúszó átmenetet határoz meg. Amikor egy útvonalra belépünk, a .fade-enter és .fade-enter-active osztályok kerülnek alkalmazásra, ami a komponens beúszását okozza. Amikor egy útvonalat elhagyunk, a .fade-exit és .fade-exit-active osztályok kerülnek alkalmazásra, ami a komponens kiúszását okozza.

Hibakezelés

A hibák elegáns kezelése elengedhetetlen a jó felhasználói élmény biztosításához. A Solid Router nem rendelkezik beépített hibakezeléssel, de könnyen megvalósíthatja egy globális hibahatár (error boundary) vagy egy útvonal-specifikus hibakezelő segítségével.

Íme egy példa egy globális hibahatárra:

            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
              
            
          

Az <ErrorBoundary> komponens elkap minden hibát, amely a gyermekein belül történik. A fallback tulajdonság határozza meg azt a komponenst, amelyet hiba esetén renderelni kell. Ebben az esetben egy bekezdést renderel a hibaüzenettel.

A <Suspense> komponens a függőben lévő ígéreteket (promise) kezeli, jellemzően aszinkron komponensekkel vagy adatbetöltéssel használatos. A `fallback` tulajdonságot jeleníti meg, amíg az ígéretek teljesülnek.

Hiba kiváltásához dobhat egy kivételt egy komponensen belül:

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

  return <h1>Home</h1>;
}

export default Home;
            

              
                Copy
              
            
          

Amikor ez a kód végrehajtódik, az <ErrorBoundary> komponens elkapja a hibát és rendereli a fallback komponenst.

Nemzetközi szempontok: A hibaüzenetek megjelenítésekor vegye figyelembe a nemzetköziesítést (i18n). Használjon egy fordítási könyvtárat, hogy a hibaüzeneteket a felhasználó preferált nyelvén jelenítse meg. Például, ha egy japán felhasználó hibába ütközik, a hibaüzenetet japánul kellene látnia, nem angolul.

Bevált gyakorlatok a Solid Router használatához

• Tartsa rendszerezetten az útvonalait: Használjon beágyazott útvonalakat az alkalmazás logikai szekciókba rendezéséhez. Ez megkönnyíti a kód karbantartását és a benne való navigációt.
• Használjon útvonalparamétereket dinamikus tartalomhoz: Használjon útvonalparamétereket dinamikus URL-ek létrehozásához egy adott azonosító vagy "slug" alapján történő tartalommegjelenítéshez.
• Töltsön be adatokat aszinkron módon: Töltsön be adatokat aszinkron módon egy útvonal renderelése előtt, hogy zökkenőmentes felhasználói élményt biztosítson.
• Adjon hozzá átmeneteket az útvonalak között: Használjon átmeneteket a felhasználói élmény javítására és az alkalmazás csiszoltabbá tételére.
• Kezelje a hibákat elegánsan: Valósítson meg hibakezelést a hibák elkapására és felhasználóbarát módon történő megjelenítésére.
• Használjon leíró útvonalneveket: Válasszon olyan útvonalneveket, amelyek pontosan tükrözik az útvonal tartalmát. Ez megkönnyíti az alkalmazás szerkezetének megértését.
• Tesztelje az útvonalait: Írjon egységteszteket annak biztosítására, hogy az útvonalai helyesen működnek. Ez segít a hibák korai elkapásában és a regressziók megelőzésében.

Összegzés

A Solid Router egy erőteljes és rugalmas kliensoldali router, amely zökkenőmentesen integrálódik a SolidJS-sel. Funkcióinak elsajátításával és a bevált gyakorlatok követésével komplex és dinamikus egyoldalas alkalmazásokat hozhat létre, amelyek zökkenőmentes és lebilincselő felhasználói élményt nyújtanak. Az alapvető beállításoktól a haladó technikákig, mint a dinamikus útválasztás, az adatbetöltés és az átmenetek, ez az útmutató felvértezte Önt azzal a tudással és készségekkel, hogy magabiztosan navigáljon a kliensoldali navigáció világában a SolidJS-ben. Használja ki a Solid Router erejét, és aknázza ki a SolidJS alkalmazásai teljes potenciálját!

Ne felejtse el megtekinteni a hivatalos Solid Router dokumentációt a legfrissebb információkért és példákért: [Solid Router Dokumentáció Link - Helyőrző]

Építsen továbbra is lenyűgöző dolgokat a SolidJS-sel!