Solid Router: Bemästra klient-sidans navigering i SolidJS

SolidJS, känt för sin exceptionella prestanda och enkelhet, utgör en fantastisk grund för att bygga moderna webbapplikationer. För att skapa verkligt engagerande och användarvänliga upplevelser är en robust router för klientsidan avgörande. Här kommer Solid Router in i bilden, den officiella och rekommenderade routern for SolidJS, designad för att smidigt integreras med ramverkets reaktiva principer.

Denna omfattande guide kommer att dyka ner i Solid Routers värld och täcka allt från grundläggande konfiguration till avancerade tekniker för att bygga komplexa och dynamiska single-page applications (SPA). Oavsett om du är en erfaren SolidJS-utvecklare eller precis har börjat, kommer den här artikeln att ge dig kunskapen och färdigheterna för att bemästra navigering på klientsidan.

Vad är Solid Router?

Solid Router är en lättviktig och högpresterande router för klientsidan, speciellt utformad för SolidJS. Den utnyttjar SolidJS reaktivitet för att effektivt uppdatera gränssnittet baserat på ändringar i webbläsarens URL. Till skillnad från traditionella routrar som förlitar sig på virtuell DOM-diffing, manipulerar Solid Router direkt DOM, vilket resulterar i snabbare och mer förutsägbar prestanda.

Nyckelfunktioner i Solid Router inkluderar:

• Deklarativ routing: Definiera dina routes med ett enkelt och intuitivt JSX-baserat API.
• Dynamisk routing: Hantera enkelt routes med parametrar, vilket gör att du kan skapa dynamiska och datadrivna applikationer.
• Nästlade routes: Organisera din applikation i logiska sektioner med nästlade routes.
• Länkkomponent: Navigera smidigt mellan routes med <A>-komponenten, som automatiskt hanterar URL-uppdateringar och styling av aktiva länkar.
• Datainläsning: Ladda data asynkront innan en route renderas, vilket säkerställer en smidig användarupplevelse.
• Övergångar: Skapa visuellt tilltalande övergångar mellan routes för att förbättra användarupplevelsen.
• Felhantering: Hantera fel på ett elegant sätt och visa anpassade felsidor.
• Integration med History API: Integreras smidigt med webbläsarens History API, vilket låter användare navigera med bakåt- och framåtknapparna.

Komma igång med Solid Router

Installation

För att installera Solid Router, använd din föredragna pakethanterare:

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

              
                Copy
              
            
          

Grundläggande konfiguration

Kärnan i Solid Router kretsar kring komponenterna <Router> och <Route>. <Router>-komponenten fungerar som roten i din applikations routingsystem, medan <Route>-komponenterna definierar mappningen mellan URL:er och komponenter.

Här är ett grundläggande exempel:

            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 detta exempel omsluter <Router>-komponenten hela applikationen. <Route>-komponenterna definierar två routes: en för rotsökvägen ("/") och en annan för "/about"-sökvägen. När användaren navigerar till någon av dessa sökvägar kommer motsvarande komponent (Home eller About) att renderas.

<A>-komponenten

För att navigera mellan routes, använd <A>-komponenten som tillhandahålls av Solid Router. Denna komponent liknar en vanlig HTML <a>-tagg, men den hanterar automatiskt URL-uppdateringar och förhindrar fullständiga sidomladdningar.

            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 användaren klickar på en av dessa länkar kommer Solid Router att uppdatera webbläsarens URL och rendera motsvarande komponent utan att utlösa en fullständig sidomladdning.

Avancerade routing-tekniker

Dynamisk routing med route-parametrar

Solid Router stöder dynamisk routing, vilket gör att du kan skapa routes med parametrar. Detta är användbart för att visa innehåll baserat på ett specifikt ID eller en 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 det här exemplet är :id-segmentet i sökvägen en route-parameter. För att komma åt värdet på id-parametern inuti UserProfile-komponenten kan du använda 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 returnerar ett objekt som innehåller route-parametrarna. I det här fallet kommer params.id att innehålla värdet på id-parametern från URL:en. createResource-hooken används sedan för att hämta användardata baserat på ID:t.

Internationellt exempel: Föreställ dig en global e-handelsplattform. Du kan använda dynamisk routing för att visa produktdetaljer baserat på produkt-ID: /products/:productId. Detta gör att du enkelt kan skapa unika URL:er för varje produkt, vilket gör det lättare för användare att dela och bokmärka specifika varor, oavsett var de befinner sig.

Nästlade routes

Nästlade routes låter dig organisera din applikation i logiska sektioner. Detta är särskilt användbart för komplexa applikationer med flera navigeringsnivå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 detta exempel fungerar <Dashboard>-komponenten som en behållare för <Profile>- och <Settings>-komponenterna. <Profile>- och <Settings>-routes är nästlade inom <Dashboard>-routen, vilket innebär att de bara kommer att renderas när användaren är på "/dashboard"-sökvägen.

För att rendera de nästlade routes inuti <Dashboard>-komponenten måste du använda <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 fungerar som en platshållare där de nästlade routes kommer att renderas. När användaren navigerar till "/dashboard/profile" kommer <Profile>-komponenten att renderas inuti <Outlet>-komponenten. På samma sätt, när användaren navigerar till "/dashboard/settings", kommer <Settings>-komponenten att renderas inuti <Outlet>-komponenten.

Datainläsning med createResource

Att asynkront ladda data innan en route renderas är avgörande för att ge en smidig användarupplevelse. Solid Router integreras smidigt med SolidJS createResource-hook, vilket gör datainläsning till en barnlek.

Vi såg ett exempel på detta i UserProfile-komponenten tidigare, men här är det igen för tydlighetens skull:

            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 två argument: en signal som utlöser datainläsningen och en funktion som hämtar datan. I det här fallet är signalen () => params.id, vilket innebär att datan kommer att hämtas varje gång id-parametern ändras. fetchUser-funktionen hämtar användardata från ett API baserat på ID:t.

createResource-hooken returnerar en array som innehåller resursen (den hämtade datan) och en funktion för att hämta om datan. Resursen är en signal som håller datan. Du kan komma åt datan genom att anropa signalen (user()). Om datan fortfarande laddas kommer signalen att returnera undefined. Detta gör att du kan visa en laddningsindikator medan datan hämtas.

Övergångar

Att lägga till övergångar mellan routes kan avsevärt förbättra användarupplevelsen. Även om Solid Router inte har inbyggt stöd för övergångar, integreras den väl med bibliotek som solid-transition-group för att uppnå smidiga och visuellt tilltalande övergångar.

Installera först paketet solid-transition-group:

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

              
                Copy
              
            
          

Omslut sedan dina routes 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 detta exempel är varje route omsluten av en <Transition>-komponent. name-propen anger CSS-klassprefixet för övergången, och duration-propen anger övergångens varaktighet i millisekunder.

Du måste definiera motsvarande CSS-klasser för övergången i din stilmall:

            .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
              
            
          

Denna CSS-kod definierar en enkel fade-in/fade-out-övergång. När en route öppnas tillämpas klasserna .fade-enter och .fade-enter-active, vilket får komponenten att tona in. När en route lämnas tillämpas klasserna .fade-exit och .fade-exit-active, vilket får komponenten att tona ut.

Felhantering

Att hantera fel på ett elegant sätt är avgörande för att ge en bra användarupplevelse. Solid Router har inte inbyggd felhantering, men du kan enkelt implementera det med en global error boundary eller en route-specifik felhanterare.

Här är ett exempel på en global error boundary:

            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 fångar upp alla fel som inträffar inom dess barn. fallback-propen anger vilken komponent som ska renderas när ett fel inträffar. I det här fallet renderar den ett stycke med felmeddelandet.

<Suspense>-komponenten hanterar väntande promises, vanligtvis använda med asynkrona komponenter eller datainläsning. Den visar fallback-propen tills promises är uppfyllda.

För att utlösa ett fel kan du kasta ett undantag inuti en komponent:

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

  return <h1>Home</h1>;
}

export default Home;
            

              
                Copy
              
            
          

När denna kod exekveras kommer <ErrorBoundary>-komponenten att fånga felet och rendera fallback-komponenten.

Internationella överväganden: När du visar felmeddelanden, överväg internationalisering (i18n). Använd ett översättningsbibliotek för att ge felmeddelanden på användarens föredragna språk. Till exempel, om en användare i Japan stöter på ett fel, bör de se felmeddelandet på japanska, inte engelska.

Bästa praxis för att använda Solid Router

• Håll dina routes organiserade: Använd nästlade routes för att organisera din applikation i logiska sektioner. Detta kommer att göra det lättare att underhålla och navigera i din kod.
• Använd route-parametrar för dynamiskt innehåll: Använd route-parametrar för att skapa dynamiska URL:er för att visa innehåll baserat på ett specifikt ID eller en slug.
• Ladda data asynkront: Ladda data asynkront innan en route renderas för att ge en smidig användarupplevelse.
• Lägg till övergångar mellan routes: Använd övergångar för att förbättra användarupplevelsen och få din applikation att kännas mer polerad.
• Hantera fel på ett elegant sätt: Implementera felhantering för att fånga och visa fel på ett användarvänligt sätt.
• Använd beskrivande route-namn: Välj route-namn som korrekt återspeglar innehållet i routen. Detta gör det lättare att förstå din applikations struktur.
• Testa dina routes: Skriv enhetstester för att säkerställa att dina routes fungerar korrekt. Detta hjälper dig att fånga fel tidigt och förhindra regressioner.

Slutsats

Solid Router är en kraftfull och flexibel router för klientsidan som smidigt integreras med SolidJS. Genom att bemästra dess funktioner och följa bästa praxis kan du bygga komplexa och dynamiska single-page applications som ger en smidig och engagerande användarupplevelse. Från grundläggande konfiguration till avancerade tekniker som dynamisk routing, datainläsning och övergångar, har denna guide gett dig kunskapen och färdigheterna för att självsäkert navigera i världen av klient-sidans navigering i SolidJS. Omfamna kraften i Solid Router och lås upp den fulla potentialen i dina SolidJS-applikationer!

Kom ihåg att konsultera den officiella Solid Router-dokumentationen för den mest uppdaterade informationen och exemplen: [Länk till Solid Router-dokumentationen - platshållare]

Fortsätt bygga fantastiska saker med SolidJS!