Routing-Architektur

Das Vartovii Dashboard verwendet React Router v6 für die URL-basierte Navigation.

Routenstruktur

Route	Komponente	Beschreibung
/app	LandingPage	Startseite mit Suchfunktion
/app/crypto/:slug	CryptoPage	Krypto-Projektanalyse
/app/company/:slug	ReportViewer	Unternehmensbericht
/app/overview	Overview	Unternehmensübersicht
/app/sentiment	Sentiment	Sentimentanalyse
/app/topics	TopicAnalysis	Themenanalyse
/app/market	MarketPulse	Marktpuls
/app/battle	BattleMode	Unternehmen vergleichen
/app/crypto-battle	CryptoBattleMode	Krypto-Projekte vergleichen
/app/live-search	LiveScrapingFlow	Echtzeit-Scraping
/app/admin	AdminPanel	Admin-Panel

Wichtige Dateien

dashboard_app/src/
├── router.jsx              # Routendefinitionen
├── main.jsx                # RouterProvider-Einrichtung
├── layouts/
│   └── DashboardLayout.jsx # Geteiltes Layout (Sidebar, Header)
└── pages/
    └── crypto/
        └── CryptoPage.jsx  # Verwendet useParams()

Navigation

Programmatische Navigation

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

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

Link-Komponenten

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

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

URL-Parameter

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

const CryptoPage = () => {
  const { slug } = useParams(); // z.B. "bitcoin"
  // ...
};

Lazy Loading

Leistungsintensive Komponenten werden für eine bessere Performance verzögert geladen:

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

Dies reduziert das anfängliche Bundle von ~1,5 MB auf ~300 KB.

Neue Routen hinzufügen

1. Route zu router.jsx hinzufügen:

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

2. Sidebar-Link in Sidebar.jsx hinzufügen:

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