Solid Router: Овладяване на клиентската навигация в SolidJS

SolidJS, известен със своята изключителна производителност и простота, предоставя фантастична основа за изграждане на модерни уеб приложения. За да създадете наистина ангажиращи и удобни за потребителя изживявания, е необходим стабилен клиентски рутер. Тук се появява Solid Router, официалният и препоръчителен рутер за SolidJS, проектиран да се интегрира безпроблемно с реактивните принципи на фреймуърка.

Това изчерпателно ръководство ще ви потопи в света на Solid Router, като обхваща всичко от основна настройка до напреднали техники за изграждане на сложни и динамични едностранични приложения (SPAs). Независимо дали сте опитен SolidJS разработчик или тепърва започвате, тази статия ще ви снабди със знанията и уменията да овладеете клиентската навигация.

Какво е Solid Router?

Solid Router е лек и производителен клиентски рутер, специално проектиран за SolidJS. Той използва реактивността на SolidJS за ефективно актуализиране на потребителския интерфейс въз основа на промените в URL адреса на браузъра. За разлика от традиционните рутери, които разчитат на сравняване на виртуален DOM, Solid Router директно манипулира DOM, което води до по-бърза и по-предсказуема производителност.

Ключовите характеристики на Solid Router включват:

• Декларативна маршрутизация: Дефинирайте вашите маршрути, използвайки прост и интуитивен JSX-базиран API.
• Динамична маршрутизация: Лесно обработвайте маршрути с параметри, което ви позволява да създавате динамични и управлявани от данни приложения.
• Вложени маршрути: Организирайте приложението си в логически секции с вложени маршрути.
• Компонент за връзки: Навигирайте безпроблемно между маршрути с помощта на компонента <A>, който автоматично обработва актуализациите на URL адреса и стилизирането на активната връзка.
• Зареждане на данни: Зареждайте данни асинхронно преди рендиране на маршрут, осигурявайки гладко потребителско изживяване.
• Преходи: Създавайте визуално привлекателни преходи между маршрути, за да подобрите потребителското изживяване.
• Обработка на грешки: Обработвайте грешките елегантно и показвайте персонализирани страници за грешки.
• Интеграция с History API: Интегрира се безпроблемно с History API на браузъра, позволявайки на потребителите да навигират с бутоните за назад и напред.

Първи стъпки със Solid Router

Инсталация

За да инсталирате Solid Router, използвайте предпочитания от вас мениджър на пакети:

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

              
                Copy
              
            
          

Основна настройка

Ядрото на Solid Router се върти около компонентите <Router> и <Route>. Компонентът <Router> действа като корен на маршрутизиращата система на вашето приложение, докато компонентите <Route> дефинират съответствието между URL адреси и компоненти.

Ето един основен пример:

            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
              
            
          

В този пример компонентът <Router> обвива цялото приложение. Компонентите <Route> дефинират два маршрута: един за основния път ("/") и друг за пътя "/about". Когато потребителят навигира до някой от тези пътища, съответният компонент (Home или About) ще бъде рендиран.

Компонентът <A>

За да навигирате между маршрути, използвайте компонента <A>, предоставен от Solid Router. Този компонент е подобен на обикновения HTML таг <a>, но автоматично обработва актуализациите на URL адреса и предотвратява пълното презареждане на страницата.

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

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

export default Navigation;
            

              
                Copy
              
            
          

Когато потребителят кликне върху една от тези връзки, Solid Router ще актуализира URL адреса на браузъра и ще рендира съответния компонент, без да предизвиква пълно презареждане на страницата.

Напреднали техники за маршрутизация

Динамична маршрутизация с параметри на маршрута

Solid Router поддържа динамична маршрутизация, което ви позволява да създавате маршрути с параметри. Това е полезно за показване на съдържание въз основа на конкретен ID или 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
              
            
          

В този пример сегментът :id в пътя е параметър на маршрута. За достъп до стойността на параметъра id в компонента UserProfile, можете да използвате куката 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
              
            
          

Куката useParams връща обект, съдържащ параметрите на маршрута. В този случай params.id ще съдържа стойността на параметъра id от URL адреса. След това куката createResource се използва за извличане на потребителските данни въз основа на ID-то.

Международен пример: Представете си глобална платформа за електронна търговия. Можете да използвате динамична маршрутизация, за да показвате подробности за продукта въз основа на ID на продукта: /products/:productId. Това ви позволява лесно да създавате уникални URL адреси за всеки продукт, улеснявайки потребителите да споделят и маркират конкретни артикули, независимо от тяхното местоположение.

Вложени маршрути

Вложените маршрути ви позволяват да организирате приложението си в логически секции. Това е особено полезно за сложни приложения с множество нива на навигация.

            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
              
            
          

В този пример компонентът <Dashboard> действа като контейнер за компонентите <Profile> и <Settings>. Маршрутите <Profile> и <Settings> са вложени в маршрута <Dashboard>, което означава, че те ще бъдат рендирани само когато потребителят е на пътя "/dashboard".

За да рендирате вложените маршрути в компонента <Dashboard>, трябва да използвате компонента <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
              
            
          

Компонентът <Outlet> действа като контейнер (placeholder), където ще бъдат рендирани вложените маршрути. Когато потребителят навигира до "/dashboard/profile", компонентът <Profile> ще бъде рендиран в компонента <Outlet>. По подобен начин, когато потребителят навигира до "/dashboard/settings", компонентът <Settings> ще бъде рендиран в компонента <Outlet>.

Зареждане на данни с createResource

Асинхронното зареждане на данни преди рендиране на маршрут е от решаващо значение за осигуряването на гладко потребителско изживяване. Solid Router се интегрира безпроблемно с куката createResource на SolidJS, което прави зареждането на данни изключително лесно.

Видяхме пример за това в компонента UserProfile по-рано, но ето го отново за по-голяма яснота:

            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 приема два аргумента: сигнал, който задейства зареждането на данни, и функция, която извлича данните. В този случай сигналът е () => params.id, което означава, че данните ще бъдат извличани всеки път, когато параметърът id се промени. Функцията fetchUser извлича потребителските данни от API въз основа на ID-то.

Куката createResource връща масив, съдържащ ресурса (извлечените данни) и функция за повторно извличане на данните. Ресурсът е сигнал, който съдържа данните. Можете да получите достъп до данните, като извикате сигнала (user()). Ако данните все още се зареждат, сигналът ще върне undefined. Това ви позволява да покажете индикатор за зареждане, докато данните се извличат.

Преходи

Добавянето на преходи между маршрути може значително да подобри потребителското изживяване. Въпреки че Solid Router няма вградена поддръжка за преходи, той се интегрира добре с библиотеки като solid-transition-group за постигане на плавни и визуално привлекателни преходи.

Първо, инсталирайте пакета solid-transition-group:

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

              
                Copy
              
            
          

След това обвийте вашите маршрути с компонента <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
              
            
          

В този пример всеки маршрут е обвит с компонент <Transition>. Свойството name указва префикса на CSS класа за прехода, а свойството duration указва продължителността на прехода в милисекунди.

Ще трябва да дефинирате съответните CSS класове за прехода във вашия stylesheet:

            .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
              
            
          

Този CSS код дефинира прост fade-in/fade-out преход. Когато се влиза в маршрут, се прилагат класовете .fade-enter и .fade-enter-active, което кара компонента да се появява плавно. Когато се излиза от маршрут, се прилагат класовете .fade-exit и .fade-exit-active, което кара компонента да изчезва плавно.

Обработка на грешки

Елегантната обработка на грешки е от съществено значение за осигуряването на добро потребителско изживяване. Solid Router няма вградена обработка на грешки, но можете лесно да я имплементирате, като използвате глобална граница за грешки (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> улавя всякакви грешки, които възникват в неговите деца. Свойството fallback указва компонента, който да се рендира, когато възникне грешка. В този случай той рендира параграф със съобщението за грешка.

Компонентът <Suspense> обработва чакащи обещания (promises), обикновено използвани с асинхронни компоненти или зареждане на данни. Той показва свойството fallback, докато обещанията не бъдат изпълнени.

За да предизвикате грешка, можете да хвърлите изключение в компонент:

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

  return <h1>Home</h1>;
}

export default Home;
            

              
                Copy
              
            
          

Когато този код се изпълни, компонентът <ErrorBoundary> ще улови грешката и ще рендира fallback компонента.

Международни съображения: Когато показвате съобщения за грешки, помислете за интернационализация (i18n). Използвайте библиотека за преводи, за да предоставяте съобщения за грешки на предпочитания от потребителя език. Например, ако потребител в Япония срещне грешка, той трябва да види съобщението за грешка на японски, а не на английски.

Най-добри практики при използване на Solid Router

• Поддържайте маршрутите си организирани: Използвайте вложени маршрути, за да организирате приложението си в логически секции. Това ще улесни поддръжката и навигацията в кода ви.
• Използвайте параметри на маршрута за динамично съдържание: Използвайте параметри на маршрута, за да създавате динамични URL адреси за показване на съдържание въз основа на конкретен ID или slug.
• Зареждайте данни асинхронно: Зареждайте данни асинхронно преди рендиране на маршрут, за да осигурите гладко потребителско изживяване.
• Добавяйте преходи между маршрути: Използвайте преходи, за да подобрите потребителското изживяване и да направите приложението си по-завършено.
• Обработвайте грешките елегантно: Имплементирайте обработка на грешки, за да улавяте и показвате грешките по удобен за потребителя начин.
• Използвайте описателни имена на маршрути: Избирайте имена на маршрути, които точно отразяват съдържанието им. Това ще улесни разбирането на структурата на вашето приложение.
• Тествайте вашите маршрути: Пишете единични тестове (unit tests), за да се уверите, че маршрутите ви работят правилно. Това ще ви помогне да улавяте грешки рано и да предотвратявате регресии.

Заключение

Solid Router е мощен и гъвкав клиентски рутер, който се интегрира безпроблемно със SolidJS. Като овладеете неговите функции и следвате най-добрите практики, можете да изграждате сложни и динамични едностранични приложения, които предоставят гладко и ангажиращо потребителско изживяване. От основна настройка до напреднали техники като динамична маршрутизация, зареждане на данни и преходи, това ръководство ви предостави знанията и уменията да навигирате уверено в света на клиентската навигация в SolidJS. Прегърнете силата на Solid Router и отключете пълния потенциал на вашите SolidJS приложения!

Не забравяйте да се консултирате с официалната документация на Solid Router за най-актуалната информация и примери: [Връзка към документацията на Solid Router - Placeholder]

Продължавайте да създавате невероятни неща със SolidJS!