Использование с MobX

TanStack Router предоставляет мощные возможности маршрутизации в приложениях на JavaScript, обеспечивая декларативное управление маршрутами и их состоянием. При работе с MobX возникает потребность в синхронизации состояния маршрутизатора с реактивными хранилищами, что позволяет управлять переходами и данными маршрутов через наблюдаемые объекты.

Настройка хранилища MobX для маршрутов

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

import { makeAutoObservable } from "mobx";

class RouterStore {
  currentRoute = "/";
  params = {};
  isLoading = false;

  constructor() {
    makeAutoObservable(this);
  }

  setRoute(route, params = {}) {
    this.currentRoute = route;
    this.params = params;
  }

  startLoading() {
    this.isLoading = true;
  }

  stopLoading() {
    this.isLoading = false;
  }
}

export const routerStore = new RouterStore();

В этом примере currentRoute хранит текущий путь, а params — параметры маршрута. Методы startLoading и stopLoading помогают отслеживать состояние асинхронной загрузки при переходах.

Связывание маршрутизатора с MobX

Для интеграции TanStack Router с MobX создаётся реактивная подписка на изменения маршрутов:

import { Router } from "@tanstack/router";
import { routerStore } from "./RouterStore";

const router = new Router({
  // определение маршрутов
});

router.subscribe(({ location }) => {
  routerStore.setRoute(location.pathname, location.params);
});

router.subscribe обеспечивает автоматическое обновление состояния хранилища при смене маршрута. Это позволяет компонентам, наблюдающим за MobX-хранилищем, реагировать на изменения маршрутов без прямого обращения к TanStack Router.

Реактивные компоненты с observer

Чтобы компоненты корректно реагировали на изменения маршрутов и состояния загрузки, используется обёртка observer из MobX:

import { observer } from "mobx-react-lite";
import { routerStore } from "./RouterStore";

const Navigation = observer(() => {
  return (
    <nav>
      <span>Текущий маршрут: {routerStore.currentRoute}</span>
      {routerStore.isLoading && <span>Загрузка...</span>}
    </nav>
  );
});

Любые изменения в routerStore.currentRoute или routerStore.isLoading автоматически вызывают перерисовку компонента, обеспечивая синхронизацию интерфейса с маршрутизатором.

Асинхронные действия и маршруты

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

const loadDataForRoute = async (route) => {
  routerStore.startLoading();
  try {
    const data = await fetch(`/api/${route}`);
    routerStore.setRoute(route, { data });
  } finally {
    routerStore.stopLoading();
  }
};

Такой подход гарантирует, что состояние загрузки всегда актуально, а данные маршрута остаются синхронизированными с MobX-хранилищем.

Управление навигацией через действия MobX

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

class RouterStore {
  // ... предыдущие свойства и методы

  navigateTo(route, params = {}) {
    router.navigate({ to: route, params });
    this.setRoute(route, params);
  }
}

Теперь любой компонент может вызывать routerStore.navigateTo("/dashboard"), обеспечивая согласованное обновление состояния маршрута и TanStack Router.

Работа с вложенными маршрутами и состоянием

TanStack Router позволяет создавать вложенные маршруты, а MobX упрощает управление состоянием каждого уровня:

class NestedRouterStore {
  currentParent = "/";
  currentChild = "";
  
  constructor() {
    makeAutoObservable(this);
  }

  setParentRoute(parent) {
    this.currentParent = parent;
    this.currentChild = "";
  }

  setChildRoute(child) {
    this.currentChild = child;
  }
}

export const nestedRouterStore = new NestedRouterStore();

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

Итоговая схема интеграции

  1. Создаётся MobX-хранилище с наблюдаемыми свойствами маршрута и состояния загрузки.
  2. TanStack Router подписывается на изменения маршрутов и обновляет хранилище.
  3. Компоненты оборачиваются в observer для автоматической перерисовки.
  4. Асинхронные загрузки данных и навигация управляются через методы хранилища.
  5. Для вложенных маршрутов создаются отдельные реактивные состояния.

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

Оглавление