Навигация и ссылки

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

Основы работы с навигацией

В Solid.js нет встроенного решения для маршрутизации, как, например, в React с React Router. Вместо этого, для навигации используются сторонние библиотеки, такие как solid-app-router, которая позволяет строить приложения с многостраничной навигацией.

Для установки solid-app-router достаточно выполнить команду:

npm install solid-app-router

После установки библиотеки, её можно подключить и использовать для маршрутизации между страницами приложения. Основные компоненты этой библиотеки включают:

  • Router — компонент, который управляет историей навигации и определяет, какой компонент отображать на основе текущего URL.
  • Route — компонент, который связывает путь с определённым компонентом.
  • Link — компонент для создания ссылок, которые меняют текущий URL без перезагрузки страницы.

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

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

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

import { Router, Route } from "solid-app-router";
import Home from "./pages/Home";
import About from "./pages/About";

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

В этом примере Home и About — это компоненты, которые будут отображаться в зависимости от текущего пути URL. Компонент Router определяет, что приложение будет использовать маршрутизацию.

Компонент Link позволяет создавать навигационные элементы, которые изменяют текущий URL без перезагрузки страницы. Это важный момент для SPA-приложений, так как ссылки должны менять состояние приложения без полного обновления.

Пример использования Link:

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

function Navigation() {
  return (
    <nav>
      <ul>
        <li><Link href="/">Главная</Link></li>
        <li><Link href="/about">О нас</Link></li>
      </ul>
    </nav>
  );
}

Ссылки, созданные с помощью компонента Link, ведут на другие страницы, и переход осуществляется без перезагрузки страницы, что сохраняет SPA-архитектуру.

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

Solid.js поддерживает создание динамических маршрутов, что позволяет работать с параметрами URL. Для этого используется синтаксис с двоеточием (:), который обозначает переменные части маршрута.

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

import { Route } from "solid-app-router";
import UserProfile from "./pages/UserProfile";

function App() {
  return (
    <Router>
      <Route path="/user/:id" component={UserProfile} />
    </Router>
  );
}

В этом примере маршрут /user/:id будет динамическим, и в компонент UserProfile можно будет передавать параметр id, который будет доступен в виде пропса.

Для того чтобы получить значение параметра, используется хук useParams:

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

function UserProfile() {
  const { id } = useParams();
  
  return <div>Профиль пользователя с ID: {id}</div>;
}

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

Вложенные маршруты в Solid.js работают аналогично тому, как это устроено в других фреймворках. Они позволяют создавать структуры с несколькими уровнями вложенных маршрутов. Для этого необходимо правильно вложить компоненты Route в другие Route компоненты.

Пример:

import { Router, Route } from "solid-app-router";
import Dashboard from "./pages/Dashboard";
import DashboardHome from "./pages/DashboardHome";
import DashboardSettings from "./pages/DashboardSettings";

function App() {
  return (
    <Router>
      <Route path="/dashboard" component={Dashboard}>
        <Route path="/" component={DashboardHome} />
        <Route path="settings" component={DashboardSettings} />
      </Route>
    </Router>
  );
}

В этом примере при переходе на маршрут /dashboard/settings будет загружен компонент DashboardSettings, а при переходе на /dashboard/ — компонент DashboardHome. Вложенные маршруты позволяют создавать более сложные иерархии, где одна страница может включать несколько различных подстраниц.

Обработка переходов

В Solid.js, как и в других SPA-фреймворках, важно контролировать поведение переходов. Для этого можно использовать useNavigate хук из solid-app-router, который позволяет программно изменять маршрут.

Пример использования useNavigate:

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

function LoginPage() {
  const navigate = useNavigate();

  function handleLogin() {
    // Логика авторизации
    navigate("/dashboard"); // Переход на страницу Dashboard
  }

  return (
    <div>
      <button onCl ick={handleLogin}>Войти</button>
    </div>
  );
}

Этот код позволяет после успешной авторизации выполнить переход на другую страницу с помощью хука useNavigate. В отличие от обычных ссылок, переходы с помощью navigate могут быть выполнены в ответ на различные действия пользователя, такие как отправка формы или клики на кнопки.

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

Защищённые маршруты — это важный аспект для большинства приложений, в которых требуется авторизация. В Solid.js можно создать защищённые маршруты, проверяя состояние пользователя перед рендером страницы.

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

import { Route, Redirect } from "solid-app-router";
import { useAuth } from "./auth";

function ProtectedRoute({ component: Component, ...props }) {
  const { isAuthenticated } = useAuth();

  if (!isAuthenticated) {
    return <Redirect to="/login" />;
  }

  return <Component {...props} />;
}

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

Заключение

В Solid.js реализация навигации и маршрутизации предполагает использование сторонних библиотек, таких как solid-app-router, для организации маршрутов и обработки переходов. Простой, но мощный синтаксис для создания динамических маршрутов, вложенных страниц и защищённых маршрутов позволяет строить приложения с гибкой и масштабируемой навигацией.

Оглавление