Определение маршрутов

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

Установка Solid Router

Для начала работы с маршрутизацией в Solid.js необходимо установить официальный пакет маршрутизатора:

npm install solid-app-router

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

Основные компоненты маршрутизации

Solid.js предлагает несколько ключевых компонентов для создания маршрутов:

  • Router: корневой компонент, который управляет состоянием маршрутизации.
  • Routes: контейнер, в котором определяются все маршруты.
  • Route: определяет отдельный маршрут и связывает его с компонентом.
  • Link: используется для создания ссылок, которые выполняют переходы между маршрутами.

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

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

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

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

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

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

Использование динамических маршрутов

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

Пример:

import { Router, Routes, Route } from 'solid-app-router';
import Post from './pages/Post';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/post/:id" component={Post} />
      </Routes>
    </Router>
  );
}

Здесь :id — это параметр, который можно использовать для получения данных из URL. Например, переход на /post/42 передаст значение 42 в компонент Post.

Для создания ссылок между маршрутами используется компонент Link, который работает аналогично обычным ссылкам HTML, но при этом производит навигацию без перезагрузки страницы.

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

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

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

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

Обработка параметров маршрута

В случае с динамическими маршрутами можно легко извлекать параметры, передаваемые в URL. Для этого используется хук useParams из solid-app-router.

Пример извлечения параметра из маршрута:

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

function Post() {
  const { id } = useParams();
  return <div>Post ID: {id}</div>;
}

Этот компонент будет отображать ID поста, переданный в URL. Например, при переходе на /post/42 будет выведено Post ID: 42.

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

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

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

import { Route, Redirect } from 'solid-app-router';

function ProtectedRoute({ component: Component, ...rest }) {
  const isAuthenticated = /* логика проверки аутентификации */;
  
  if (!isAuthenticated) {
    return <Redirect href="/login" />;
  }

  return <Route {...rest} component={Component} />;
}

В этом примере если пользователь не аутентифицирован, происходит редирект на страницу входа.

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

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

Пример вложенных маршрутов:

import { Router, Routes, Route } from 'solid-app-router';
import Layout from './components/Layout';
import Dashboard from './pages/Dashboard';
import Settings from './pages/Settings';

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

В этом примере Layout является основным компонентом, который рендерится для всех вложенных маршрутов. Внутри него рендерятся компоненты для маршрутов dashboard и settings.

Навигация с использованием состояния

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

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

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

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

  function handleSubmit(event) {
    event.preventDefault();
    // логика аутентификации
    navigate('/dashboard');
  }

  return (
    <form onSub mit={handleSubmit}>
      <button type="submit">Login</button>
    </form>
  );
}

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

Использование хука useLocation

Хук useLocation позволяет получить текущее состояние маршрута, включая путь, параметры и состояние.

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

import { useLocation } from 'solid-app-router';

function CurrentPage() {
  const location = useLocation();
  return <div>Current path: {location.pathname}</div>;
}

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

Заключение

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

Оглавление