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

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

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion react-router-dom

После установки подключается ChakraProvider в корневом компоненте приложения, чтобы обеспечить доступ ко всем компонентам Chakra UI и глобальным темам:

import { ChakraProvider } from '@chakra-ui/react';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';

function Root() {
  return (
    <ChakraProvider>
      <Router>
        <App />
      </Router>
    </ChakraProvider>
  );
}

export default Root;

Важно: порядок обёрток имеет значение — Router должен быть внутри ChakraProvider, чтобы стили и темы корректно применялись к маршрутизируемым компонентам.

Часто возникает необходимость стилизовать ссылки маршрутизации. В Chakra UI для этого подходит компонент Link, но чтобы он корректно работал с маршрутизацией, используется комбинация с react-router-dom:

import { Link as ChakraLink, Button } from '@chakra-ui/react';
import { Link as RouterLink } from 'react-router-dom';

<ChakraLink as={RouterLink} to="/about">
  Перейти на страницу About
</ChakraLink>

<Button as={RouterLink} to="/contact" colorScheme="teal">
  Контакты
</Button>
  • as={RouterLink} позволяет Chakra UI использовать функциональность React Router, сохраняя возможности стилизации.
  • Любой компонент Chakra UI с пропсом as может быть превращён в ссылку маршрутизации.

Навигационные компоненты и маршруты

React Router предоставляет компоненты Routes и Route для определения маршрутов:

import { Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
</Routes>

Компоненты Chakra UI легко интегрируются в маршрутизируемые страницы:

import { Box, Heading, Text, Button } from '@chakra-ui/react';

function Home() {
  return (
    <Box p={8}>
      <Heading>Главная страница</Heading>
      <Text mt={4}>Добро пожаловать на главную страницу.</Text>
      <Button mt={6} colorScheme="blue" as={RouterLink} to="/about">
        Узнать больше
      </Button>
    </Box>
  );
}

Динамические маршруты и Chakra UI

Для динамических маршрутов React Router использует параметры в пути:

<Route path="/profile/:userId" element={<Profile />} />

Внутри компонента можно получать параметры через хук useParams:

import { useParams } from 'react-router-dom';
import { Box, Heading, Text } from '@chakra-ui/react';

function Profile() {
  const { userId } = useParams();

  return (
    <Box p={6}>
      <Heading>Профиль пользователя</Heading>
      <Text mt={4}>ID пользователя: {userId}</Text>
    </Box>
  );
}

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

Меню навигации с Chakra UI и React Router

Для построения навигационного меню удобно использовать Flex, HStack и Button:

import { Flex, HStack, Button } from '@chakra-ui/react';
import { Link as RouterLink } from 'react-router-dom';

function Navbar() {
  return (
    <Flex as="nav" bg="gray.100" p={4} justify="space-between">
      <HStack spacing={4}>
        <Button as={RouterLink} to="/" variant="ghost">Главная</Button>
        <Button as={RouterLink} to="/about" variant="ghost">О нас</Button>
        <Button as={RouterLink} to="/contact" variant="ghost">Контакты</Button>
      </HStack>
    </Flex>
  );
}
  • variant="ghost" делает кнопки минималистичными, сохраняя фокус на контенте.
  • HStack упрощает горизонтальное распределение элементов.

Применение Chakra UI с React Router Outlet

React Router v6 поддерживает вложенные маршруты с Outlet. Chakra UI можно использовать для создания обёрток и макетов:

import { Outlet } from 'react-router-dom';
import { Box } from '@chakra-ui/react';

function Layout() {
  return (
    <Box>
      <Navbar />
      <Box p={6}>
        <Outlet />
      </Box>
    </Box>
  );
}

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

<Routes>
  <Route path="/" element={<Layout />}>
    <Route index element={<Home />} />
    <Route path="about" element={<About />} />
    <Route path="contact" element={<Contact />} />
  </Route>
</Routes>

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

Адаптивная навигация с Chakra UI и React Router

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

import { Drawer, DrawerOverlay, DrawerContent, DrawerBody, Button } from '@chakra-ui/react';
import { Link as RouterLink } from 'react-router-dom';

function MobileMenu({ isOpen, onClose }) {
  return (
    <Drawer isOpen={isOpen} placement="left" onCl ose={onClose}>
      <DrawerOverlay />
      <DrawerContent>
        <DrawerBody>
          <Button as={RouterLink} to="/" w="100%" onCl ick={onClose}>Главная</Button>
          <Button as={RouterLink} to="/about" w="100%" onCl ick={onClose}>О нас</Button>
        </DrawerBody>
      </DrawerContent>
    </Drawer>
  );
}
  • Drawer позволяет скрывать меню и открывать его по кнопке.
  • Стилизация остаётся полностью управляемой через Chakra UI.

Анимации при навигации

Chakra UI интегрирован с framer-motion, что позволяет плавно анимировать переходы между страницами:

import { motion } from 'framer-motion';
import { Box } from '@chakra-ui/react';

const MotionBox = motion(Box);

function Home() {
  return (
    <MotionBox
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      p={6}
    >
      <Heading>Главная страница</Heading>
      <Text mt={4}>Плавная анимация при загрузке страницы.</Text>
    </MotionBox>
  );
}
  • Можно комбинировать с React Router для создания эффектов при смене маршрутов.
  • Использование MotionBox упрощает внедрение анимаций без дополнительных библиотек.

Работа с темами и маршрутизацией

Chakra UI предоставляет гибкую систему тем, которая сохраняется на всех страницах:

import { extendTheme, ChakraProvider } from '@chakra-ui/react';

const theme = extendTheme({
  colors: {
    brand: {
      100: "#f7caca",
      500: "#e53e3e",
    },
  },
  fonts: {
    heading: "Roboto, sans-serif",
    body: "Inter, sans-serif",
  },
});

<ChakraProvider theme={theme}>
  <Router>
    <App />
  </Router>
</ChakraProvider>
  • Все маршруты автоматически получают доступ к кастомной теме.
  • Цветовые схемы и шрифты остаются едиными, что упрощает поддержку дизайна.

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

Оглавление