Routing Architecture

Vartovii Dashboard uses React Router v6 for URL-based navigation.

Route Structure

Route	Component	Description
/app	LandingPage	Home page with search
/app/crypto/:slug	CryptoPage	Crypto project analysis
/app/company/:slug	ReportViewer	Company report
/app/overview	Overview	Corporate overview
/app/sentiment	Sentiment	Sentiment analysis
/app/topics	TopicAnalysis	Topic analysis
/app/market	MarketPulse	Market pulse
/app/battle	BattleMode	Compare companies
/app/crypto-battle	CryptoBattleMode	Compare crypto projects
/app/live-search	LiveScrapingFlow	Real-time scraping
/app/admin	AdminPanel	Admin panel

Key Files

dashboard_app/src/
├── router.jsx              # Route definitions
├── main.jsx                # RouterProvider setup
├── layouts/
│   └── DashboardLayout.jsx # Shared layout (Sidebar, Header)
└── pages/
    └── crypto/
        └── CryptoPage.jsx  # Uses useParams()

Navigation

Programmatic Navigation

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

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

Link Components

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

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

URL Parameters

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

const CryptoPage = () => {
  const { slug } = useParams(); // e.g., "bitcoin"
  // ...
};

Lazy Loading

Heavy components are lazy-loaded for performance:

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

This reduces initial bundle from ~1.5MB to ~300KB.

Adding New Routes

1. Add route to router.jsx:

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

2. Add sidebar link in Sidebar.jsx:

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