Архітектура маршрутизації

Панель керування Vartovii використовує React Router v6 для навігації на основі URL-адрес.

Структура маршрутів

Маршрут	Компонент	Опис
/app	LandingPage	Домашня сторінка з пошуком
/app/crypto/:slug	CryptoPage	Аналіз криптопроектів
/app/company/:slug	ReportViewer	Звіт компанії
/app/overview	Overview	Корпоративний огляд
/app/sentiment	Sentiment	Аналіз настроїв
/app/topics	TopicAnalysis	Аналіз тем
/app/market	MarketPulse	Пульс ринку
/app/battle	BattleMode	Порівняння компаній
/app/crypto-battle	CryptoBattleMode	Порівняння криптопроектів
/app/live-search	LiveScrapingFlow	Збір даних у реальному часі
/app/admin	AdminPanel	Панель адміністратора

Ключові файли

dashboard_app/src/
├── router.jsx              # Визначення маршрутів
├── main.jsx                # Налаштування RouterProvider
├── layouts/
│   └── DashboardLayout.jsx # Спільний макет (Sidebar, Header)
└── pages/
    └── crypto/
        └── CryptoPage.jsx  # Використовує useParams()

Навігація

Програмна навігація

import { useNavigate } from "react-router-dom";

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

  const goToCrypto = (slug) => {
    navigate(`/app/crypto/${slug}`);
  };
};

Компоненти Link

import { Link } from "react-router-dom";

<Link to="/app/crypto/bitcoin">Bitcoin</Link>;

Параметри URL

import { useParams } from "react-router-dom";

const CryptoPage = () => {
  const { slug } = useParams(); // наприклад, "bitcoin"
  // ...
};

Відкладене завантаження (Lazy Loading)

Важкі компоненти завантажуються з відстрочкою (lazy-loaded) для підвищення продуктивності:

const CryptoPage = lazy(() => import("./pages/crypto/CryptoPage"));

Це зменшує початковий бандл з ~1.5MB до ~300KB.

Додавання нових маршрутів

1. Додайте маршрут до router.jsx:

{ path: 'new-feature', element: <NewFeature /> }

2. Додайте посилання до бічної панелі в Sidebar.jsx:

{ id: 'new_feature', label: 'New Feature', icon: Star, path: '/app/new-feature' }