Интеграция с Inferno Router

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

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

Маршрутизация в Inferno основывается на трех ключевых концептах:

  1. Маршруты (Routes) — определяют соответствие URL и компонентов. Каждый маршрут связывает путь с конкретным компонентом.
  2. История (History) — управление историей браузера и навигацией, поддержка HTML5 history API и hash-based навигации.
  3. Рендеринг компонентов — автоматический рендеринг компонентов при смене пути, с возможностью передачи параметров маршрута в компоненты.

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

Настройка маршрутов

Маршруты создаются с использованием компонента Router и компонентов Route и Switch. Компонент Router принимает объект истории (browserHistory или hashHistory), который контролирует текущее состояние URL:

import { render } from 'inferno';
import { Router, Route, Switch, browserHistory } from 'inferno-router';
import App from './App';
import About from './About';
import NotFound from './NotFound';

render(
  <Router history={browserHistory}>
    <Switch>
      <Route path="/" component={App} exact />
      <Route path="/about" component={About} />
      <Route component={NotFound} />
    </Switch>
  </Router>,
  document.getElementById('root')
);

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

  • Switch выбирает первый маршрут, который совпадает с текущим URL, предотвращая одновременный рендеринг нескольких компонентов.
  • Атрибут exact указывает, что путь должен совпадать полностью, предотвращая частичное совпадение с другими маршрутами.
  • Последний Route без указания пути используется как fallback для обработки 404 страниц.

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

Inferno Router поддерживает динамические сегменты URL, которые передаются в компонент через объект props.match.params. Например:

<Route path="/user/:id" component={UserProfile} />

Компонент UserProfile может получить идентификатор пользователя:

function UserProfile({ match }) {
  const { id } = match.params;
  return <div>Профиль пользователя: {id}</div>;
}

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

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

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

<Route path="/dashboard" component={Dashboard}>
  <Route path="stats" component={Stats} />
  <Route path="settings" component={Settings} />
</Route>

Вложенные маршруты рендерятся внутри родительского компонента через props.children. Родительский компонент может содержать общий интерфейс или панель навигации:

function Dashboard({ children }) {
  return (
    <div>
      <h1>Панель управления</h1>
      <nav>
        <a href="/dashboard/stats">Статистика</a>
        <a href="/dashboard/settings">Настройки</a>
      </nav>
      <div>{children}</div>
    </div>
  );
}

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

Иногда необходимо изменять URL без клика по ссылке. Для этого используется объект истории:

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

Методы истории:

  • push(path) — добавляет новый URL в историю.
  • replace(path) — заменяет текущий URL.
  • go(n) — перемещает на n шагов в истории.
  • goBack() и goForward() — переход назад и вперед.

Ленивый рендеринг компонентов

Inferno Router позволяет подключать компоненты динамически с использованием import() для уменьшения начального размера бандла:

const About = () => import('./About');

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

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

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

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

function PrivateRoute({ component: Component, isAuthenticated, ...rest }) {
  return (
    <Route
      {...rest}
      render={props =>
        isAuthenticated ? <Component {...props} /> : <Redirect to="/login" />
      }
    />
  );
}

Такой подход позволяет гибко управлять доступом к страницам без дублирования логики авторизации в каждом компоненте.

Работа с query-параметрами

Inferno Router не парсит query-параметры автоматически, но их можно извлекать через объект location:

function SearchPage({ location }) {
  const params = new URLSearchParams(location.search);
  const query = params.get('q');
  return <div>Результаты поиска: {query}</div>;
}

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

Поддержка редиректов

Редиректы реализуются с использованием компонента Redirect:

<Route exact path="/">
  <Redirect to="/dashboard" />
</Route>

Компонент Redirect автоматически изменяет URL и вызывает рендер соответствующего маршрута.

Интеграция с state management

Inferno Router легко интегрируется с библиотеками управления состоянием (например, Redux или MobX). Объект истории можно передавать в middleware или слушатели состояния, обеспечивая синхронизацию навигации с состоянием приложения.

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

Оглавление