Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

import { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';

// ── Lazy route components ──────────────────────────────────────────────────
const Home      = lazy(() => import('./pages/Home'));
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings  = lazy(() => import('./pages/Settings'));

// ── Route-level code splitting ─────────────────────────────────────────────
function AppRoutes() {
    return (
        <Suspense fallback={<div className="page-spinner">Loading page…</div>}>
            <Routes>
                <Route path="/"          element={<Home />} />
                <Route path="/dashboard" element={<Dashboard />} />
                <Route path="/settings"  element={<Settings />} />
            </Routes>
        </Suspense>
    );
}

// ── Nested Suspense for sub-components ─────────────────────────────────────
const HeavyChart = lazy(() => import('./components/HeavyChart'));

function DashboardPage() {
    return (
        <div>
            <h1>Dashboard</h1>
            {/* Chart has its own dedicated loading state */}
            <Suspense fallback={<div className="chart-skeleton" />}>
                <HeavyChart />
            </Suspense>
        </div>
    );
}

export default AppRoutes;