Работа с React Router

Для построения SPA (Single Page Application) в React часто используется React Router. Ant Design предоставляет множество компонентов интерфейса, которые можно эффективно сочетать с маршрутизацией, чтобы создавать динамические и удобные приложения. Ключевым моментом является корректная организация навигации, где элементы интерфейса Ant Design, такие как Menu, Button или Tabs, связаны с маршрутами React Router.

import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import { Menu } from 'antd';

Здесь Link и Route используются для создания маршрутов, а компонент Menu может служить навигационной панелью.

Навигация с использованием Menu

Ant Design Menu часто применяют для боковой или верхней навигации. Чтобы сделать пункты меню интерактивными с маршрутизацией, используется Link из React Router.

<Menu mode="horizontal" selectedKeys={[current]}>
  <Menu.Item key="home">
    <Link to="/">Главная</Link>
  </Menu.Item>
  <Menu.Item key="about">
    <Link to="/about">О нас</Link>
  </Menu.Item>
  <Menu.Item key="contact">
    <Link to="/contact">Контакты</Link>
  </Menu.Item>
</Menu>
  • mode="horizontal" — горизонтальная ориентация меню.
  • selectedKeys — массив, который указывает текущий активный пункт. Его можно связывать с текущим путем через useLocation().
import { useLocation } from 'react-router-dom';

const location = useLocation();
const current = location.pathname === '/' ? 'home' : location.pathname.slice(1);

Кнопки и навигация

Компонент Button можно использовать для перехода по маршрутам без <Link> с помощью хука useNavigate.

import { Button } from 'antd';
import { useNavigate } from 'react-router-dom';

const NavigateButton = () => {
  const navigate = useNavigate();

  return (
    <Button type="primary" onCl ick={() => navigate('/about')}>
      Узнать больше
    </Button>
  );
};
  • useNavigate возвращает функцию для программной навигации.
  • Button type="primary" подчеркивает важность действия.

Использование Tabs для маршрутов

Компонент Tabs от Ant Design удобно интегрируется с React Router, если требуется переключение контента на одной странице без перезагрузки.

import { Tabs } from 'antd';
import { useNavigate, useLocation } from 'react-router-dom';

const TabNavigation = () => {
  const navigate = useNavigate();
  const location = useLocation();

  const handleChange = (key) => {
    navigate(key);
  };

  return (
    <Tabs activeKey={location.pathname} onCha nge={handleChange}>
      <Tabs.TabPane tab="Главная" key="/" />
      <Tabs.TabPane tab="О нас" key="/about" />
      <Tabs.TabPane tab="Контакты" key="/contact" />
    </Tabs>
  );
};
  • activeKey синхронизируется с текущим путем.
  • onChange вызывает переход на другой маршрут при смене вкладки.

Динамические маршруты и Ant Design Layout

При работе с динамическими маршрутами полезно использовать Layout компоненты (Layout, Sider, Content, Header) для структурирования страниц.

import { Layout, Menu } from 'antd';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

const { Header, Content, Footer, Sider } = Layout;

<Router>
  <Layout style={{ minHeight: '100vh' }}>
    <Sider>
      <Menu theme="dark" mode="inline">
        <Menu.Item key="1">
          <Link to="/">Главная</Link>
        </Menu.Item>
        <Menu.Item key="2">
          <Link to="/about">О нас</Link>
        </Menu.Item>
      </Menu>
    </Sider>
    <Layout>
      <Header style={{ background: '#fff' }}>Мое приложение</Header>
      <Content style={{ margin: '16px' }}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Content>
      <Footer style={{ textAlign: 'center' }}>©2026 Компания</Footer>
    </Layout>
  </Layout>
</Router>
  • Layout задает общую структуру приложения.
  • Sider с меню обеспечивает постоянную боковую навигацию.
  • Content обновляется в зависимости от маршрута.

Работа с модальными окнами и маршрутами

Иногда требуется открывать Modal от Ant Design при переходе на определенный маршрут. Это достигается с помощью комбинации useLocation и Modal.

import { Modal, Button } from 'antd';
import { useLocation, useNavigate } from 'react-router-dom';

const ModalRoute = () => {
  const location = useLocation();
  const navigate = useNavigate();

  const isModalOpen = location.pathname === '/modal';

  return (
    <Modal
      open={isModalOpen}
      onCan cel={() => navigate(-1)}
      onOk={() => navigate(-1)}
      title="Окно"
    >
      Контент модального окна
    </Modal>
  );
};
  • open управляет состоянием модального окна на основе маршрута.
  • navigate(-1) возвращает пользователя к предыдущему пути.

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

Ant Design с React Router отлично справляется с вложенными маршрутами, особенно с компонентами Menu и Breadcrumb.

<Menu mode="inline" defaultOpenKeys={['sub1']}>
  <Menu.SubMenu key="sub1" title="Раздел 1">
    <Menu.Item key="1">
      <Link to="/section1/page1">Страница 1</Link>
    </Menu.Item>
    <Menu.Item key="2">
      <Link to="/section1/page2">Страница 2</Link>
    </Menu.Item>
  </Menu.SubMenu>
</Menu>
  • SubMenu позволяет создавать иерархическую структуру.
  • Можно синхронизировать с Breadcrumb для отображения пути пользователя.

Резюме ключевых практик

  1. Использовать Link и useNavigate для интеграции навигации с компонентами Ant Design.
  2. Синхронизировать активные элементы меню или вкладок с текущим маршрутом через useLocation().
  3. Для боковой или верхней навигации применять Menu внутри Layout.
  4. Использовать динамические маршруты для модальных окон и вкладок.
  5. Вложенные маршруты удобно отображать через SubMenu и Breadcrumb.

Эта интеграция позволяет создавать SPA с гибкой навигацией, аккуратно оформленной с помощью Ant Design, сохраняя при этом полное управление маршрутами через React Router.

Оглавление