Программная навигация

Программная навигация в Inferno позволяет управлять переходами между страницами приложения без перезагрузки браузера, обеспечивая плавный пользовательский опыт и высокую производительность. Основой для такой навигации является библиотека inferno-router, совместимая с React Router API, что облегчает миграцию и использование привычных паттернов маршрутизации.

Основы inferno-router

inferno-router предоставляет компоненты <Router>, <Route> и <Link> для декларативной навигации. Для программной навигации используется объект истории (history), который можно создать через библиотеку history. Он позволяет управлять переходами, не используя визуальные компоненты:

import { createBrowserHistory } from 'history';
import { Router, Route } from 'inferno-router';

const history = createBrowserHistory();

<Router history={history}>
    <Route path="/" component={Home} />
    <Route path="/about" component={About} />
</Router>

Здесь history становится центральной точкой управления навигацией. Методы push, replace и goBack позволяют переходить на новые маршруты, заменять текущий маршрут или возвращаться назад в истории.

Использование history.push для переходов

Метод history.push добавляет новый маршрут в стек истории. Это основной инструмент для программного перехода между страницами:

function handleClick() {
    history.push('/about');
}

При вызове push компонент <Router> автоматически обновляет текущий маршрут и рендерит соответствующий компонент. Отличие от <Link> заключается в том, что навигация происходит полностью программно, без необходимости взаимодействия пользователя.

Замена текущего маршрута через history.replace

Метод replace используется, когда необходимо заменить текущий маршрут без создания новой записи в истории. Это полезно для перенаправлений после авторизации или при ошибках:

function redirectToLogin() {
    history.replace('/login');
}

Замена маршрута предотвращает возможность возврата на предыдущую страницу с помощью кнопки «Назад» браузера.

Возврат к предыдущим страницам с history.goBack и history.go

history.goBack возвращает пользователя на предыдущую страницу в истории:

function handleBack() {
    history.goBack();
}

Метод history.go(n) позволяет перемещаться на n шагов вперед или назад в истории. Отрицательное значение перемещает назад, положительное — вперед:

history.go(-2); // вернуться на две страницы назад

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

Навигация с параметрами и состоянием

Программная навигация позволяет передавать параметры маршрута и состояние между страницами. Например:

history.push('/profile/123', { fromDashboard: true });

В компоненте, который рендерится на /profile/:id, можно получить параметры через props.match.params и состояние через props.location.state:

function Profile({ match, location }) {
    const userId = match.params.id;
    const fromDashboard = location.state?.fromDashboard;
}

Это позволяет строить сложные сценарии навигации без использования глобального состояния.

Асинхронная навигация и обработка эффектов

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

async function navigateToDetails(id) {
    const data = await fetchData(id);
    history.push(`/details/${id}`, { data });
}

Интеграция с состоянием компонентов через useEffect или жизненные циклы классов обеспечивает плавный переход и корректное отображение данных.

Навигация в SPA и контроль перезагрузки страницы

Программная навигация в Inferno позволяет полностью избежать перезагрузки страницы, что критично для SPA. Все переходы выполняются на клиенте, а <Router> реагирует на изменения history и обновляет только те части DOM, которые изменились, благодаря виртуальному DOM Inferno.

Это повышает производительность и снижает нагрузку на сервер, так как повторная загрузка HTML не требуется.

Практические рекомендации

  • Всегда использовать единый объект history в приложении для предотвращения рассинхронизации маршрутов.
  • Для редиректов после операций авторизации предпочтительно применять replace, чтобы пользователи не могли вернуться на страницы авторизации.
  • Параметры маршрута и состояние должны передаваться через props или объект состояния location.state для поддержания чистой архитектуры.
  • Асинхронные переходы оборачивать в обработку ошибок и загрузку данных, чтобы избежать состояния «пустого экрана» во время ожидания.

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

Оглавление