Solid Router: установка и конфигурация

Solid Router — это официальная библиотека маршрутизации для фреймворка Solid.js, предназначенная для управления навигацией в одностраничных приложениях (SPA). Она обеспечивает возможности для маршрутизации, обработки URL, а также динамической подгрузки компонентов, аналогично другим популярным решениям, таким как React Router, но с акцентом на производительность и реактивность.

Установка Solid Router

Для начала необходимо установить сам фреймворк Solid.js, если он ещё не установлен. Затем добавляется Solid Router, который является дополнительным пакетом.

  1. Установите Solid.js:
npm install solid-js
  1. Установите Solid Router:
npm install solid-app-router

Эта команда добавит все необходимые зависимости для работы с маршрутизацией в вашем проекте.

Основы использования

После установки библиотеки можно перейти к настройке маршрутов. Solid Router работает через компоненты, которые обрабатывают URL-пути и рендерят соответствующие компоненты на основе маршрута.

1. Создание маршрутов

В Solid Router маршруты определяются через компонент <Routes>. Каждый маршрут прописывается внутри компонента <Route>, где указывается путь и компонент, который должен рендериться при соответствующем переходе.

Пример базовой конфигурации маршрутов:

import { Routes, Route } from "solid-app-router";
import { render } from "solid-js/web";

import Home from "./pages/Home";
import About from "./pages/About";

function App() {
  return (
    <Routes>
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
    </Routes>
  );
}

render(App, document.getElementById("root"));

В этом примере при переходе по пути / будет отображаться компонент Home, а при переходе по пути /about — компонент About.

2. Динамические маршруты

Solid Router поддерживает динамические маршруты, которые могут быть использованы для обработки параметров URL. Динамические сегменты определяются с помощью двоеточия :.

Пример динамического маршрута:

<Route path="/user/:id" component={User} />

В этом примере параметр id будет доступен в компоненте User через объект params.

Внутри компонента можно получить доступ к этому параметру с помощью хука useParams:

import { useParams } from "solid-app-router";

function User() {
  const params = useParams();
  return <div>Пользователь с ID: {params.id}</div>;
}
3. Программная навигация

Для управления переходами по маршрутам можно использовать хук useNavigate. Он позволяет программно изменять URL, не используя ссылки.

Пример программного перехода:

import { useNavigate } from "solid-app-router";

function GoToAbout() {
  const navigate = useNavigate();
  
  const goToAboutPage = () => {
    navigate("/about");
  };

  return <button onCl ick={goToAboutPage}>Перейти на страницу «О нас»</button>;
}

Когда пользователь нажмёт на кнопку, произойдёт переход на страницу /about.

4. Рендеринг компонентов с условием

В Solid Router можно управлять рендерингом компонентов с помощью условия. Например, если нужно отображать страницу входа только для незарегистрированных пользователей, можно использовать следующую конструкцию:

<Route path="/login" component={Login} />
<Route path="/dashboard" component={Dashboard} />

Если пользователь не авторизован, он будет перенаправлен на страницу входа:

import { useNavigate } from "solid-app-router";

function Dashboard() {
  const navigate = useNavigate();
  const user = null; // Здесь может быть логика проверки авторизации

  if (!user) {
    navigate("/login");
    return null; // Рендерить ничего не нужно
  }

  return <div>Добро пожаловать на панель управления</div>;
}

Настройки маршрутизации

Solid Router поддерживает несколько дополнительных возможностей для настройки маршрутизации.

1. Префикс маршрутов

Если в вашем приложении нужно использовать префикс для всех путей (например, /app/*), можно настроить базовый путь для всех маршрутов:

<Routes base="/app">
  <Route path="/" component={Home} />
  <Route path="/about" component={About} />
</Routes>

В этом случае все маршруты будут начинаться с /app, и путь / будет соответствовать /app/.

2. Защищённые маршруты

Для реализации защиты маршрутов, например, для авторизованных пользователей, Solid Router позволяет использовать дополнительные логики внутри компонента маршрута. Это может быть полезно, если нужно ограничить доступ к определённым страницам.

Пример защищённого маршрута:

<Route path="/profile" component={ProtectedProfile} />

В компоненте ProtectedProfile можно добавлять логику проверки авторизации:

import { useNavigate } from "solid-app-router";

function ProtectedProfile() {
  const navigate = useNavigate();
  const user = null; // Пример с отсутствием пользователя

  if (!user) {
    navigate("/login");
    return null;
  }

  return <div>Профиль пользователя</div>;
}
3. Ожидание данных и ленивые маршруты

Solid Router поддерживает динамическую подгрузку маршрутов, что полезно для улучшения производительности за счёт асинхронной загрузки компонентов. Это можно реализовать с помощью React-стиля React.lazy() и Suspense:

import { Suspense } from "solid-js";
import { Routes, Route } from "solid-app-router";

const About = React.lazy(() => import("./pages/About"));

function App() {
  return (
    <Suspense fallback={<div>Загрузка...</div>}>
      <Routes>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
      </Routes>
    </Suspense>
  );
}

Этот подход позволяет загружать компоненты только при необходимости, что значительно ускоряет начальную загрузку приложения.

Заключение

Solid Router — это мощный инструмент для маршрутизации в приложениях на базе Solid.js. Он предоставляет множество возможностей, включая динамическую маршрутизацию, защиту маршрутов и поддержку ленивой загрузки компонентов. Благодаря высокому уровню производительности и интеграции с реактивной моделью Solid.js, Solid Router является отличным выбором для разработки одностраничных приложений.

Оглавление