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

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

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

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

Создание простого маршрута

Простой маршрут создается с использованием компонента <Route> из библиотеки solid-app-router. Он описывает путь и компонент, который должен рендериться при совпадении пути:

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

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

В этом примере маршруты / и /about рендерят компоненты HomePage и AboutPage соответственно. Теперь рассмотрим, как добавить вложенные маршруты.

Вложенные маршруты: Основы

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

Для реализации вложенности необходимо использовать компонент <Routes> внутри другого компонента и определить вложенные маршруты с помощью <Route>.

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

function Dashboard() {
  return (
    <div>
      <h1>Дашборд</h1>
      <Routes>
        <Route path="/overview" component={OverviewPage} />
        <Route path="/settings" component={SettingsPage} />
      </Routes>
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/dashboard/*" component={Dashboard} />
    </Routes>
  );
}

Здесь компонент Dashboard рендерит два вложенных маршрута: /dashboard/overview и /dashboard/settings. Важно отметить, что для вложенных маршрутов в родительском маршруте должен быть использован символ *, чтобы обозначить возможные подмаршруты.

Динамические вложенные маршруты

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

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

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

function PostPage() {
  const params = useParams();
  return <div>Пост {params.id}</div>;
}

function Dashboard() {
  return (
    <div>
      <h1>Дашборд</h1>
      <Routes>
        <Route path="/post/:id" component={PostPage} />
      </Routes>
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/dashboard/*" component={Dashboard} />
    </Routes>
  );
}

В этом примере маршрут /dashboard/post/:id использует параметр id, который можно извлечь с помощью хука useParams. Это позволяет отображать различные страницы в зависимости от значения параметра в URL.

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

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

Пример передачи состояния между вложенными маршрутами:

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

function SettingsPage() {
  return <div>Настройки</div>;
}

function ProfilePage() {
  return <div>Профиль</div>;
}

function Dashboard() {
  const [selectedTab, setSelectedTab] = createSignal("profile");

  return (
    <div>
      <h1>Дашборд</h1>
      <button onCl ick={() => setSelectedTab("profile")}>Профиль</button>
      <button onCl ick={() => setSelectedTab("settings")}>Настройки</button>

      <Routes>
        {selectedTab() === "profile" && <Route path="/dashboard/profile" component={ProfilePage} />}
        {selectedTab() === "settings" && <Route path="/dashboard/settings" component={SettingsPage} />}
      </Routes>
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/dashboard/*" component={Dashboard} />
    </Routes>
  );
}

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

Управление вложенными маршрутами

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

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

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

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

  return (
    <div>
      <h1>Дашборд</h1>
      <button onCl ick={() => navigate("/dashboard/overview")}>Обзор</button>
      <button onCl ick={() => navigate("/dashboard/settings")}>Настройки</button>

      <Routes>
        <Route path="/overview" component={OverviewPage} />
        <Route path="/settings" component={SettingsPage} />
      </Routes>
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/dashboard/*" component={Dashboard} />
    </Routes>
  );
}

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

Заключение

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

Оглавление