Routes

The template includes a Route Registry — a centralised system that maps every page URL in the application. Brands can fully customise URL paths without touching component code or the route tree.

How it works

All page routes are defined in app/config/routes/paths.ts. Each key maps to a URL pattern:

// app/config/routes/paths.ts (defaults)
export const routePaths: RoutePathMap = {
  home: "/",
  search: "/search",
  casino: "/games",
  "casino.play": "/games/:provider/:game",
  sports: "/sports",
  gamification: "/vip",
  "user.data": "/user/data",
  // ...
};

The route tree (routes.config.ts) reads these paths via routePattern(), and all links use routeHref() / gameHref() — so changing the path map automatically updates both routing and navigation.

Customising routes for your brand

1. Create overrides/<brand-key>/app/config/routes/paths.ts
2. Export a complete routePaths object (all keys must be present)
3. Only change the static segments — param placeholders (:slug, :provider, :game, :id, :type, :token) must stay the same

Example — state77.com

// overrides/state77-com/app/config/routes/paths.ts
import type { RoutePathMap } from "~/types/routes";

export const routePaths: RoutePathMap = {
  home: "/",
  search: "/buscar",
  debug: "/debug",

  casino: "/casino",
  "casino.live": "/casino/ao-vivo",
  "casino.category": "/casino/categoria/:slug",
  "casino.providers": "/casino/provedores",
  "casino.provider": "/casino/provedores/:slug",
  "casino.play": "/casino/jogo/:provider/:game",

  sports: "/esportes",
  "sports.catchAll": "/esportes/*",
  "sports.test": "/esportes-teste",

  gamification: "/gamificacao",
  "gamification.missions": "/gamificacao/missoes",
  "gamification.tournaments": "/gamificacao/torneios",
  "gamification.tournament": "/gamificacao/torneios/:id",
  "gamification.store": "/gamificacao/loja",
  "gamification.miniGames": "/gamificacao/mini-jogos",
  "gamification.levels": "/gamificacao/niveis",
  "gamification.badges": "/gamificacao/conquistas",
  "gamification.bonuses": "/gamificacao/bonus",

  "user.data": "/jogador/dados",
  "user.wallet": "/jogador/carteira",
  "user.history": "/jogador/historico",
  "user.config": "/jogador/configuracoes",
  "user.protection": "/jogador/protecao",
  "user.notifications": "/jogador/notificacoes",
  "user.validate": "/jogador/validar/:type/:token",
  "user.refers": "/jogador/indicacoes",

  "legal.page": "/legal/:slug",
  helpCenter: "/ajuda",
};

Available route keys

Home & Misc

Key	Default path	Description
home	/	Homepage
search	/search	Search page
debug	/debug	Debug page (dev)

Casino

Key	Default path	Description
casino	/games	Casino lobby
casino.live	/games/live	Live casino
casino.category	/games/category/:slug	Games by category
casino.providers	/games/providers	Providers grid
casino.provider	/games/providers/:slug	Games by provider
casino.play	/games/:provider/:game	Game detail/play

Sports

Key	Default path	Description
sports	/sports	Sportsbook index
sports.catchAll	/sports/*	Sportsbook deep links
sports.test	/sports-test	Test sportsbook

Gamification

Key	Default path	Description
gamification	/vip	Gamification hub
gamification.missions	/vip/missions	Missions
gamification.tournaments	/vip/tournaments	Tournaments
gamification.tournament	/vip/tournaments/:id	Tournament detail
gamification.store	/vip/store	Store
gamification.miniGames	/vip/mini-games	Mini-games
gamification.levels	/vip/levels	Levels
gamification.badges	/vip/badges	Badges
gamification.bonuses	/vip/bonuses	Bonuses

User

Key	Default path	Description
user.data	/user/data	Personal data
user.wallet	/user/wallet	Wallet & transactions
user.history	/user/history	Login & activity history
user.config	/user/config	Settings (password, 2FA, preferences)
user.protection	/user/protection	Responsible gaming
user.notifications	/user/notifications	Notifications
user.validate	/user/validate/:type/:token	Link validation
user.refers	/user/refers	Referrals

Legal & Help

Key	Default path	Description
legal.page	/legal/:slug	Dynamic legal page
helpCenter	/help	Help center

Rules

1. All paths must start with /
2. Param placeholders are fixed — :slug, :provider, :game, :id, :type, :token must not be renamed (components use useParams() with these exact names)
3. sports.catchAll must end with /*
4. The override must be a complete map — TypeScript will error if any key is missing
5. API routes are excluded — they are internal server endpoints and are not part of the Route Registry

Using routes in code

import { routeHref, gameHref, sportPath } from "~/utils/routes";

// Static route
routeHref("casino")        // → '/games' or '/casino' (brand override)

// Dynamic route
routeHref("casino.category", { slug: "slots" })

// Game link from "provider/game" slug
gameHref("pgsoft/fortune-tiger")

// Sportsbook deep link
sportPath("/futebol/brasil")

Adding or removing pages

To add or remove pages entirely, edit app/config/routes.config.ts. The Route Registry only controls URL paths — the route tree structure is defined in routes.config.ts.

• All routes should be nested inside layout('routes/_layout.tsx', [...]) for brand/env providers to work
• Use index() for the default page of a group
• Use route(routePattern('key'), file) for named pages
• You can create any components, pages, or hooks you need — the fork is fully yours to customize