Tabs и роутинг

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

Простейшая структура компонента выглядит так:

import { Tabs } from 'antd';

const { TabPane } = Tabs;

function App() {
  return (
    <Tabs defaultActiveKey="1">
      <TabPane tab="Первая вкладка" key="1">
        Контент первой вкладки
      </TabPane>
      <TabPane tab="Вторая вкладка" key="2">
        Контент второй вкладки
      </TabPane>
    </Tabs>
  );
}
  • defaultActiveKey задает вкладку, которая будет активной при рендере.
  • Каждый TabPane должен иметь уникальный key для корректного управления состоянием.

Динамические и управляемые вкладки

В Ant Design поддерживается управляемый режим работы с вкладками через проп activeKey. Это позволяет контролировать активную вкладку программно и интегрировать переключение с внешними событиями, например, с роутингом.

const [activeKey, setActiveKey] = useState('1');

<Tabs activeKey={activeKey} onCha nge={key => setActiveKey(key)}>
  <TabPane tab="Вкладка A" key="A">Контент A</TabPane>
  <TabPane tab="Вкладка B" key="B">Контент B</TabPane>
</Tabs>
  • onChange вызывается при переключении вкладки, передавая ключ новой активной вкладки.
  • Управляемый режим позволяет синхронизировать вкладки с состоянием приложения, URL или другими компонентами.

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

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

Пример реализации:

import { Tabs } from 'antd';
import { BrowserRouter as Router, Routes, Route, useNavigate, useLocation } from 'react-router-dom';

const { TabPane } = Tabs;

function TabsWithRouting() {
  const navigate = useNavigate();
  const location = useLocation();

  const activeKey = location.pathname;

  return (
    <Tabs activeKey={activeKey} onCha nge={key => navigate(key)}>
      <TabPane tab="Домой" key="/">Контент Домой</TabPane>
      <TabPane tab="Профиль" key="/profile">Контент Профиль</TabPane>
      <TabPane tab="Настройки" key="/settings">Контент Настройки</TabPane>
    </Tabs>
  );
}

function App() {
  return (
    <Router>
      <TabsWithRouting />
      <Routes>
        <Route path="/" element={<div>Домой</div>} />
        <Route path="/profile" element={<div>Профиль</div>} />
        <Route path="/settings" element={<div>Настройки</div>} />
      </Routes>
    </Router>
  );
}
  • useNavigate позволяет программно менять URL при переключении вкладок.
  • useLocation используется для определения текущего маршрута и установки соответствующей вкладки активной.
  • Такой подход обеспечивает синхронизацию состояния интерфейса с адресной строкой браузера, что улучшает UX и поддерживает возможность прямых ссылок на конкретные вкладки.

Вкладки с закрываемыми панелями

Ant Design поддерживает закрываемые вкладки, что полезно в сценариях, где пользователь может открывать несколько динамических панелей.

const [tabs, setTabs] = useState([
  { key: '1', tab: 'Вкладка 1', content: 'Контент 1' },
  { key: '2', tab: 'Вкладка 2', content: 'Контент 2' },
]);

const removeTab = key => {
  setTabs(prev => prev.filter(tab => tab.key !== key));
};

<Tabs
  type="editable-card"
  onE dit={(targetKey, action) => {
    if (action === 'remove') removeTab(targetKey);
  }}
>
  {tabs.map(tab => (
    <TabPane tab={tab.tab} key={tab.key}>
      {tab.content}
    </TabPane>
  ))}
</Tabs>
  • type=“editable-card” добавляет возможность закрывать и переименовывать вкладки.
  • Метод onEdit обрабатывает действия add и remove, предоставляя полный контроль над динамическими вкладками.

Настройка стиля и расположения

Tabs поддерживает несколько видов расположения и отображения:

  • tabPosition: 'top' | 'right' | 'bottom' | 'left' — позиция вкладок.
  • size: 'small' | 'middle' | 'large' — размер вкладок.
  • animated: boolean | { inkBar: boolean, tabPane: boolean } — включение анимации при переключении.
<Tabs tabPosition="left" size="large" animated={{ inkBar: true, tabPane: false }}>
  <TabPane tab="Левая вкладка" key="1">Контент</TabPane>
  <TabPane tab="Вторая" key="2">Контент</TabPane>
</Tabs>
  • Настройка tabPosition=“left” позволяет создавать вертикальные вкладки, удобные для боковой навигации.
  • Гибкая анимация повышает визуальную отзывчивость интерфейса без перегрузки приложения.

Ленивая загрузка содержимого

Для оптимизации производительности можно использовать lazy loading вкладок. Ant Design предоставляет проп forceRender, который управляет рендерингом панели:

<Tabs>
  <TabPane tab="Первая" key="1" forceRender>
    Контент загружается сразу
  </TabPane>
  <TabPane tab="Вторая" key="2">
    Контент загружается при активации
  </TabPane>
</Tabs>
  • Вкладка без forceRender рендерится только при первом открытии.
  • Это позволяет экономить ресурсы при больших объемах данных или сложных компонентах.

Заключение по Tabs и роутингу

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

Оглавление