Интеграция с React

Для работы с библиотекой Navigo в приложении на React сначала необходимо установить её через npm или yarn:

npm install navigo
# или
yarn add navigo

После установки Navigo импортируется в компонент или модуль, где будет происходить настройка маршрутизации:

import { Router } from 'navigo';

Для корректной работы в React рекомендуется использовать Browser History API, что позволяет сохранять состояние URL без полной перезагрузки страницы. Инициализация маршрутизатора выполняется так:

const router = new Router('/', { hash: false });

Параметр '/' указывает на базовый путь приложения, а hash: false отключает использование хешей в URL.

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

Маршруты в Navigo задаются с помощью метода .on(). В React можно использовать отдельный компонент для управления всеми маршрутами:

router
  .on('/', () => renderPage(<Home />))
  .on('/about', () => renderPage(<About />))
  .on('/profile/:id', (params) => renderPage(<Profile userId={params.id} />))
  .resolve();

Ключевые моменты:

  • :id — динамический сегмент маршрута, который передается в функцию обработчик через объект params.
  • Метод .resolve() используется для инициализации маршрутов и проверки текущего URL при загрузке страницы.
  • Для React важно, чтобы renderPage выполнял ререндер нужного компонента в корневом элементе приложения:
import ReactDOM from 'react-dom/client';

function renderPage(component) {
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(component);
}

Работа с динамическими маршрутами

Dynamically generated URLs позволяют создавать маршруты с параметрами, которые можно использовать для передачи данных в компоненты:

router.on('/post/:postId/comment/:commentId', (params) => {
  renderPage(<Comment postId={params.postId} commentId={params.commentId} />);
});

В этом примере параметры postId и commentId извлекаются из URL и передаются в компонент Comment.

Навигация между страницами

Для изменения маршрута без перезагрузки страницы используется метод router.navigate(path):

function goToProfile(userId) {
  router.navigate(`/profile/${userId}`);
}

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

Использование параметров запроса

Navigo поддерживает работу с query-параметрами через объект location. Например:

router.on('/search', () => {
  const query = new URLSearchParams(window.location.search);
  const term = query.get('q');
  renderPage(<Search term={term} />);
});

Таким образом, маршруты могут обрабатывать как динамические сегменты URL, так и параметры запроса.

Группировка маршрутов и middleware

Для сложных приложений можно создавать группы маршрутов с общими обработчиками или middleware. Пример:

router
  .on({
    '/dashboard': () => renderPage(<Dashboard />),
    '/dashboard/settings': () => renderPage(<Settings />)
  })
  .resolve();

Middleware-функции позволяют проверять авторизацию или выполнять подготовку данных перед отображением компонента:

router
  .before((done, params) => {
    if (!isAuthenticated()) {
      router.navigate('/login');
    } else {
      done();
    }
  });

Здесь done() необходимо вызвать для продолжения маршрутизации после выполнения проверок.

Интеграция с React Hooks

Для синхронизации состояния приложения с маршрутизатором можно использовать useState и useEffect:

import { useState, useEffect } from 'react';
import { Router } from 'navigo';

export default function App() {
  const [component, setComponent] = useState(<Home />);
  const router = new Router('/', { hash: false });

  useEffect(() => {
    router
      .on('/', () => setComponent(<Home />))
      .on('/about', () => setComponent(<About />))
      .on('/profile/:id', (params) => setComponent(<Profile userId={params.id} />))
      .resolve();
  }, []);

  return component;
}

Преимущества такого подхода:

  • Состояние React автоматически обновляется при смене маршрута.
  • Нет необходимости вручную рендерить компоненты через ReactDOM.
  • Возможность использовать привычные React-паттерны для управления состоянием.

Поддержка 404 и неопределенных маршрутов

Для обработки несуществующих страниц можно определить маршрут с *:

router.notFound(() => setComponent(<NotFound />));

Метод .notFound() вызывается, если текущий URL не совпадает ни с одним определенным маршрутом, обеспечивая корректное отображение страницы ошибки.

Советы по оптимизации

  • Для больших приложений рекомендуется разделять маршруты по функциональным модулям.
  • Использовать lazy loading компонентов через React.lazy и Suspense для уменьшения времени первой загрузки.
  • Middleware можно применять для авторизации, логирования или предварительной загрузки данных.
  • Всегда вызывать router.resolve() после добавления новых маршрутов для корректной работы навигации.

Эти подходы позволяют построить легковесную, гибкую маршрутизацию в React с использованием Navigo, сохраняя преимущества SPA и управляемого состояния приложения.

Оглавление