Wouter

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

---

Установка и подключение

Установка Wouter производится через npm или yarn:

npm install wouter

или

yarn add wouter

Импортируются ключевые функции из пакета:

import { Router, Route, Link, useLocation } from "wouter";

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

---

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

Маршруты задаются с использованием компонента Route. Простейший пример:

Особенности Wouter:

• Совпадение происходит по пути, аналогично React Router v6.
• Поддерживается динамическая маршрутизация через параметры:

  {params => }

Здесь params автоматически передаются в функцию как объект, где ключи соответствуют именам параметров в пути.

---

Навигация

Для перемещения между маршрутами используется компонент Link:

Главная
О нас

Link предотвращает полную перезагрузку страницы и интегрируется с историей браузера. Для программной навигации применяется хук useLocation:

const [location, setLocation] = useLocation();

function goToAbout() {
  setLocation("/about");
}

setLocation работает аналогично вызову history.push и обновляет текущее состояние маршрута.

---

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

Wouter поддерживает динамические сегменты в пути с помощью параметров и регулярных выражений:

  {params => }

• Параметр :id(\d+) ограничивает id только числовыми значениями.
• Любые несоответствия маршрута не вызывают рендер компонента.

---

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

Вложенные маршруты реализуются через обычные Route внутри компонента:

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

---

Поддержка 404 страниц

Обработка несоответствующих маршрутов делается с помощью компонента Switch или через условный рендеринг:

import { Switch } from "wouter";


  
  
  
    
  

• Последний Route без path срабатывает как fallback.
• Можно использовать кастомную логику для отображения страниц 404 при несовпадении пути.

---

Хуки Wouter

useLocation

const [location, setLocation] = useLocation();

• location — текущий путь.
• setLocation(path, replace = false) — обновляет путь; replace = true заменяет текущую запись в истории вместо добавления новой.

useRoute

const [match, params] = useRoute("/user/:id");

• match — булево значение совпадения маршрута.
• params — объект параметров, если путь совпадает.

---

Преимущества и особенности Wouter

• Минималистичный размер (несколько килобайт), что делает библиотеку подходящей для легких проектов и микрофронтендов.
• Простая интеграция с React Suspense и ленивой загрузкой компонентов.
• Легко тестируется благодаря отсутствию сложного внутреннего состояния.
• Полностью совместима с функциональными компонентами и хуками.

---

Ленивая загрузка маршрутов

Комбинация Wouter с React.lazy позволяет подгружать страницы по требованию:

import { lazy, Suspense } from "react";

const AboutPage = lazy(() => import("./AboutPage"));


  Загрузка...

  Главная