VendeeDocs
Frontend

Roteamento

React Router, rotas protegidas e lazy loading

React Router

O app usa createBrowserRouter do React Router com lazy loading via React.lazy.

Estrutura de rotas

/ → redirect → /dashboard
/login
/forgot-password
/reset-password
/auth/callback

/ (ProtectedRoute)
  └── AppLayout
      ├── /dashboard
      ├── /deals
      ├── /deals/:id
      ├── /contacts
      ├── /contacts/:id
      ├── /companies
      ├── /companies/:id
      ├── /activities
      └── /settings (SettingsLayout)
          ├── /settings/empresa
          ├── /settings/equipe
          ├── /settings/pipelines
          ├── /settings/produtos
          ├── /settings/tipos-negocio
          ├── /settings/origens
          ├── /settings/atividades
          ├── /settings/motivos-perda
          ├── /settings/qualificacao
          ├── /settings/campos
          └── /settings/perfil

ProtectedRoute

Wrapper que verifica autenticacao antes de renderizar rotas protegidas. Redireciona para /login se o usuario nao estiver autenticado.

Lazy loading

Todas as pages sao carregadas com React.lazy e envolvidas em SuspenseWrapper:

const DealsPage = lazy(() => import("@/features/deals/DealsPage"));

// Na rota:
element: (
  <SuspenseWrapper>
    <DealsPage />
  </SuspenseWrapper>
)

Constantes de rotas

As URLs sao definidas em src/lib/constants.ts via ROUTES:

import { ROUTES } from "@/lib/constants";

navigate(ROUTES.deals);
navigate(ROUTES.settings.pipelines);

On this page