Skip to main content

Application Shell

Developer Beginner

The EZApp component provides the application shell with layout, navigation, and authentication.

Basic Usage​

import { EZApp } from 'ez-console';

export default function App() {
  return <EZApp basePath='/' />;
}

Adding Custom Routes​

import { EZApp, withSuspense } from 'ez-console';
import { lazy } from 'react';

const ProductPage = lazy(() => import('@/pages/ProductPage'));
const OrderPage = lazy(() => import('@/pages/OrderPage'));

export default function App() {
  return (
    <EZApp
      basePath='/'
      extraPrivateRoutes={[
        {
          path: '/products',
          element: withSuspense(ProductPage),
          name: 'products',
        },
        {
          path: '/orders',
          element: withSuspense(OrderPage),
          name: 'orders',
        },
      ]}
    />
  );
}

Theming​

import { ConfigProvider } from 'antd';
import { EZApp } from 'ez-console';

export default function App() {
  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: '#1890ff',
          borderRadius: 4,
        }
      }}
    >
      <EZApp basePath='/' />
    </ConfigProvider>
  );
}

Built-in Features​

The EZApp provides:

  • ✅ Layout (header, sidebar, content)
  • ✅ Navigation menu
  • ✅ Authentication flow
  • ✅ Route protection
  • ✅ User profile dropdown
  • ✅ Language switcher
  • ✅ Dark mode toggle (optional)

Next Steps​