# React Router
Este guia descreve como o React Router 7 é usado no projeto.
app/routes.ts concentra a configuração de rotas com helpers de @react-router/dev/routes.app/routes/ como modulos de rota (um arquivo por rota).app/routes/home.tsx.Exemplo atual:
app/routes.ts usa index("routes/home.tsx") para a home.Um modulo de rota tipico exporta:
default -> componente da pagina.meta() -> metadados da pagina (title/description).Exemplo real: app/routes/home.tsx exporta meta() e o componente Home.
O layout raiz fica em app/root.tsx e e responsavel por:
Layout (exigido pelo React Router) com <Meta />, <Links />, <ScrollRestoration /> e <Scripts />.<Outlet />.Link de react-router para navegacao interna (ex.: app/components/header/style.tsx).<a> puro para rotas internas para nao forçar reload.app/routes/ com o componente e exports opcionais:export function meta() {
return [
{ title: "Minha nova rota" },
{ name: "description", content: "Descricao da pagina" },
];
}
export default function MinhaRota() {
return <div>Conteudo</div>;
}
app/routes.ts usando os helpers do React Router:import { index, route, type RouteConfig } from "@react-router/dev/routes";
export default [
index("routes/home.tsx"),
route("/minha-rota", "routes/minha-rota.tsx"),
] satisfies RouteConfig;
app/root.tsx.pnpm typecheck gera tipos de rotas e executa o tsc.