Routing

O template usa React Router v7 com SSR. A definição de rotas usa a API @react-router/dev/routes.

routes.ts

O arquivo routes.ts na raiz do app/ é o entry point do routing. Ele importa buildRoutes() do config:

// app/routes.ts
import type { RouteConfig } from '@react-router/dev/routes';
import { buildRoutes } from './config/routes.config';

export default buildRoutes() satisfies RouteConfig;

cuidado

routes.ts usa import relativo ./config/routes.config — tilde alias (~/config/routes.config) não funciona aqui por limitação do React Router.

routes.config.ts (fork override)

// app/config/routes.config.ts
import { index, layout, route } from '@react-router/dev/routes';

export function buildRoutes() {
  return [
    layout('routes/_layout.tsx', [
      index('routes/_index.tsx'),
      // Adicione mais rotas aqui
    ]),
  ];
}

Forks sobrescrevem este arquivo para adicionar/remover páginas.

_layout.tsx (loader)

O _layout.tsx é um layout route que:

1. Carrega a configuração de brand no server (loader)
2. Monta clientEnv com variáveis necessárias no browser
3. Renderiza o LayoutComponent do config

export async function loader({ context }: Route.LoaderArgs) {
  const env = context.cloudflare?.env ?? process.env;
  const brand = await loadBrandConfig(env);
  const clientEnv = { API_BASE_URL: env.API_BASE_URL, ... };
  return { brand, clientEnv };
}

Dicas

• Prefira editar routes.config.ts ao invés de routes.ts — o routes.ts apenas importa buildRoutes() do config
• Use layout() para nested layouts e index() para a página default de um grupo
• Forks podem criar qualquer página nova em app/routes/ e registrá-la em routes.config.ts