Solid Router: Klientinės pusės naršymo įvaldymas su SolidJS

SolidJS, žinomas dėl savo išskirtinio našumo ir paprastumo, suteikia puikų pagrindą kurti modernias žiniatinklio aplikacijas. Norint sukurti tikrai įtraukiančias ir vartotojui draugiškas patirtis, būtinas tvirtas klientinės pusės maršrutizatorius. Susipažinkite su Solid Router – oficialiu ir rekomenduojamu maršrutizatoriumi, skirtu SolidJS, sukurtu sklandžiai integruotis su karkaso reaktyviaisiais principais.

Šis išsamus gidas pasiners į Solid Router pasaulį, apimdamas viską nuo pagrindinės sąrankos iki pažangių metodų, skirtų kurti sudėtingas ir dinamiškas vieno puslapio aplikacijas (SPA). Nesvarbu, ar esate patyręs SolidJS programuotojas, ar tik pradedantysis, šis straipsnis suteiks jums žinių ir įgūdžių, reikalingų klientinės pusės naršymui įvaldyti.

Kas yra Solid Router?

Solid Router yra lengvas ir našus klientinės pusės maršrutizatorius, specialiai sukurtas SolidJS. Jis naudoja SolidJS reaktyvumą, kad efektyviai atnaujintų vartotojo sąsają, pasikeitus naršyklės URL. Skirtingai nuo tradicinių maršrutizatorių, kurie remiasi virtualaus DOM palyginimu, Solid Router tiesiogiai manipuliuoja DOM, todėl užtikrina greitesnį ir labiau nuspėjamą veikimą.

Pagrindinės Solid Router savybės:

• Deklaratyvusis maršrutizavimas: Apibrėžkite savo maršrutus naudodami paprastą ir intuityvų JSX pagrindu sukurtą API.
• Dinaminis maršrutizavimas: Lengvai tvarkykite maršrutus su parametrais, leisdami kurti dinamiškas ir duomenimis pagrįstas aplikacijas.
• Įdėtieji maršrutai: Organizuokite savo aplikaciją į logines dalis su įdėtaisiais maršrutais.
• Nuorodos komponentas: Sklandžiai naršykite tarp maršrutų naudodami <A> komponentą, kuris automatiškai tvarko URL atnaujinimus ir aktyvios nuorodos stilių.
• Duomenų įkėlimas: Asinchroniškai įkelkite duomenis prieš atvaizduojant maršrutą, užtikrindami sklandžią vartotojo patirtį.
• Perėjimai: Kurkite vizualiai patrauklius perėjimus tarp maršrutų, kad pagerintumėte vartotojo patirtį.
• Klaidų apdorojimas: Sklandžiai apdorokite klaidas ir rodykite pasirinktinius klaidų puslapius.
• History API integracija: Sklandžiai integruojasi su naršyklės History API, leisdama vartotojams naršyti naudojant atgal ir pirmyn mygtukus.

Darbo su Solid Router pradžia

Diegimas

Norėdami įdiegti Solid Router, naudokite pageidaujamą paketų tvarkyklę:

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

              
                Copy
              
            
          

Pagrindinė sąranka

Solid Router pagrindas sukasi aplink <Router> ir <Route> komponentus. <Router> komponentas veikia kaip jūsų aplikacijos maršrutizavimo sistemos šaknis, o <Route> komponentai apibrėžia sąsajas tarp URL ir komponentų.

Štai pagrindinis pavyzdys:

            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
              
            
          

Šiame pavyzdyje <Router> komponentas apgaubia visą aplikaciją. <Route> komponentai apibrėžia du maršrutus: vieną pagrindiniam keliui („/“) ir kitą „/about“ keliui. Kai vartotojas pereina į vieną iš šių kelių, bus atvaizduotas atitinkamas komponentas (Home arba About).

<A> komponentas

Norėdami naršyti tarp maršrutų, naudokite Solid Router teikiamą <A> komponentą. Šis komponentas panašus į įprastą HTML <a> žymę, tačiau jis automatiškai tvarko URL atnaujinimus ir apsaugo nuo viso puslapio perkrovimo.

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

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

export default Navigation;
            

              
                Copy
              
            
          

Kai vartotojas spusteli vieną iš šių nuorodų, Solid Router atnaujins naršyklės URL ir atvaizduos atitinkamą komponentą, nesukeldamas viso puslapio perkrovimo.

Pažangūs maršrutizavimo metodai

Dinaminis maršrutizavimas su maršruto parametrais

Solid Router palaiko dinaminį maršrutizavimą, leidžiantį kurti maršrutus su parametrais. Tai naudinga norint rodyti turinį pagal konkretų ID arba trumpinį (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
              
            
          

Šiame pavyzdyje :id segmentas kelyje yra maršruto parametras. Norėdami pasiekti id parametro vertę UserProfile komponente, galite naudoti useParams kabliuką (hook):

            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 kabliukas grąžina objektą su maršruto parametrais. Šiuo atveju params.id turės id parametro vertę iš URL. Tuomet createResource kabliukas naudojamas vartotojo duomenims gauti pagal ID.

Tarptautinis pavyzdys: Įsivaizduokite pasaulinę el. prekybos platformą. Galėtumėte naudoti dinaminį maršrutizavimą, kad rodytumėte produkto informaciją pagal produkto ID: /products/:productId. Tai leidžia lengvai sukurti unikalius URL kiekvienam produktui, todėl vartotojams, nepriklausomai nuo jų buvimo vietos, lengviau dalintis ir išsaugoti konkrečias prekes.

Įdėtieji maršrutai

Įdėtieji maršrutai leidžia organizuoti jūsų aplikaciją į logines dalis. Tai ypač naudinga sudėtingoms aplikacijoms su keliais naršymo lygiais.

            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
              
            
          

Šiame pavyzdyje <Dashboard> komponentas veikia kaip konteineris <Profile> ir <Settings> komponentams. <Profile> ir <Settings> maršrutai yra įdėti į <Dashboard> maršrutą, o tai reiškia, kad jie bus atvaizduojami tik tada, kai vartotojas bus „/dashboard“ kelyje.

Norėdami atvaizduoti įdėtuosius maršrutus <Dashboard> komponente, turite naudoti <Outlet> komponentą:

            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> komponentas veikia kaip vietos rezervavimo ženklas, kur bus atvaizduojami įdėtieji maršrutai. Kai vartotojas pereis į „/dashboard/profile“, <Profile> komponentas bus atvaizduotas <Outlet> komponente. Panašiai, kai vartotojas pereis į „/dashboard/settings“, <Settings> komponentas bus atvaizduotas <Outlet> komponente.

Duomenų įkėlimas su createResource

Asinchroniškas duomenų įkėlimas prieš atvaizduojant maršrutą yra labai svarbus siekiant užtikrinti sklandžią vartotojo patirtį. Solid Router sklandžiai integruojasi su SolidJS createResource kabliuku, todėl duomenų įkėlimas tampa itin paprastas.

Šio pavyzdį jau matėme anksčiau UserProfile komponente, bet pateikiame jį dar kartą aiškumo dėlei:

            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 kabliukas priima du argumentus: signalą, kuris inicijuoja duomenų įkėlimą, ir funkciją, kuri gauna duomenis. Šiuo atveju signalas yra () => params.id, o tai reiškia, kad duomenys bus gaunami kiekvieną kartą, kai pasikeis id parametras. fetchUser funkcija gauna vartotojo duomenis iš API pagal ID.

createResource kabliukas grąžina masyvą, kuriame yra resursas (gauti duomenys) ir funkcija duomenims iš naujo gauti. Resursas yra signalas, kuriame saugomi duomenys. Duomenis galite pasiekti iškviesdami signalą (user()). Jei duomenys vis dar įkeliami, signalas grąžins undefined. Tai leidžia rodyti įkėlimo indikatorių, kol duomenys gaunami.

Perėjimai

Perėjimų pridėjimas tarp maršrutų gali žymiai pagerinti vartotojo patirtį. Nors Solid Router neturi įmontuoto perėjimų palaikymo, jis gerai integruojasi su bibliotekomis, tokiomis kaip solid-transition-group, kad būtų pasiekti sklandūs ir vizualiai patrauklūs perėjimai.

Pirmiausia, įdiekite solid-transition-group paketą:

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

              
                Copy
              
            
          

Tada, apgaubkite savo maršrutus <TransitionGroup> komponentu:

            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
              
            
          

Šiame pavyzdyje kiekvienas maršrutas yra apgaubtas <Transition> komponentu. name savybė nurodo CSS klasės priešdėlį perėjimui, o duration savybė nurodo perėjimo trukmę milisekundėmis.

Jums reikės apibrėžti atitinkamas CSS klases perėjimui savo stilių faile:

            .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
              
            
          

Šis CSS kodas apibrėžia paprastą atsiradimo/išnykimo (fade-in/fade-out) perėjimą. Kai įeinama į maršrutą, pritaikomos .fade-enter ir .fade-enter-active klasės, dėl kurių komponentas atsiranda palaipsniui. Kai išeinama iš maršruto, pritaikomos .fade-exit ir .fade-exit-active klasės, dėl kurių komponentas palaipsniui išnyksta.

Klaidų apdorojimas

Sklandus klaidų apdorojimas yra būtinas norint užtikrinti gerą vartotojo patirtį. Solid Router neturi įmontuoto klaidų apdorojimo, tačiau jį galite lengvai įdiegti naudodami visuotinę klaidų ribą (error boundary) arba konkrečiam maršrutui skirtą klaidų apdorojimo priemonę.

Štai visuotinės klaidų ribos pavyzdys:

            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> komponentas pagauna visas klaidas, kurios įvyksta jo vaikiniuose elementuose. fallback savybė nurodo komponentą, kuris bus atvaizduojamas įvykus klaidai. Šiuo atveju jis atvaizduoja pastraipą su klaidos pranešimu.

<Suspense> komponentas tvarko laukiančius pažadus (promises), paprastai naudojamas su asinchroniniais komponentais arba duomenų įkėlimu. Jis rodo `fallback` savybę, kol pažadai bus išspręsti.

Norėdami sukelti klaidą, galite išmesti išimtį komponente:

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

  return <h1>Home</h1>;
}

export default Home;
            

              
                Copy
              
            
          

Kai šis kodas bus įvykdytas, <ErrorBoundary> komponentas pagaus klaidą ir atvaizduos atsarginį komponentą.

Tarptautiniai aspektai: Rodydami klaidų pranešimus, atsižvelkite į internacionalizaciją (i18n). Naudokite vertimų biblioteką, kad pateiktumėte klaidų pranešimus vartotojo pageidaujama kalba. Pavyzdžiui, jei vartotojas Japonijoje susiduria su klaida, jis turėtų matyti klaidos pranešimą japonų, o ne anglų kalba.

Geriausios Solid Router naudojimo praktikos

• Organizuokite maršrutus: Naudokite įdėtuosius maršrutus, kad suskirstytumėte aplikaciją į logines dalis. Tai palengvins kodo priežiūrą ir naršymą po jį.
• Naudokite maršruto parametrus dinaminiam turiniui: Naudokite maršruto parametrus, kad sukurtumėte dinamiškus URL, skirtus rodyti turinį pagal konkretų ID ar trumpinį.
• Įkelkite duomenis asinchroniškai: Asinchroniškai įkelkite duomenis prieš atvaizduodami maršrutą, kad užtikrintumėte sklandžią vartotojo patirtį.
• Pridėkite perėjimus tarp maršrutų: Naudokite perėjimus, kad pagerintumėte vartotojo patirtį ir suteiktumėte aplikacijai daugiau išbaigtumo.
• Sklandžiai apdorokite klaidas: Įdiekite klaidų apdorojimą, kad pagautumėte ir rodytumėte klaidas vartotojui draugišku būdu.
• Naudokite aprašomuosius maršrutų pavadinimus: Rinkitės maršrutų pavadinimus, kurie tiksliai atspindi maršruto turinį. Tai padės lengviau suprasti jūsų aplikacijos struktūrą.
• Testuokite savo maršrutus: Rašykite vienetų testus (unit tests), kad užtikrintumėte, jog jūsų maršrutai veikia teisingai. Tai padės anksti aptikti klaidas ir išvengti regresijų.

Išvados

Solid Router yra galingas ir lankstus klientinės pusės maršrutizatorius, kuris sklandžiai integruojasi su SolidJS. Įvaldę jo funkcijas ir laikydamiesi geriausių praktikų, galite kurti sudėtingas ir dinamiškas vieno puslapio aplikacijas, kurios suteikia sklandžią ir įtraukiančią vartotojo patirtį. Nuo pagrindinės sąrankos iki pažangių metodų, tokių kaip dinaminis maršrutizavimas, duomenų įkėlimas ir perėjimai, šis gidas suteikė jums žinių ir įgūdžių, kad galėtumėte užtikrintai naršyti klientinės pusės navigacijos pasaulyje su SolidJS. Pasinaudokite Solid Router galia ir atskleiskite visą savo SolidJS aplikacijų potencialą!

Nepamirškite pasikonsultuoti su oficialia Solid Router dokumentacija, kad gautumėte naujausią informaciją ir pavyzdžius: [Solid Router dokumentacijos nuoroda - vieta nuorodai]

Toliau kurkite nuostabius dalykus su SolidJS!