Migração do React Router para TanStack Router

O que é o TanStack Router

TanStack Router é um roteador client-side feito por Tanner Linsley — sim, o mesmo cara do React Query. Faz parte da suíte TanStack, que traz soluções pra tabelas, forms, virtualização de listas e até banco de dados local.

O cenário do React Router

Depois da aquisição do Remix, o React Router mudou bastante. Versões recentes misturam funcionalidades do Remix direto no core, criando novos modos: declarativo, data e framework. Essa fusão gerou complexidade e deixou muita gente confusa.

Por que migrar para o TanStack Router

A migração veio da busca por simplicidade e ferramentas mais modernas. TanStack Router traz tipagem completa, rotas baseadas em arquivos, integração com Vite e uma DX bem mais produtiva.

Features que fazem a diferença

O grande destaque é a tipagem nas rotas. Paths, parâmetros, query strings — tudo inferido com segurança. TanStack Router também deixa você definir titles e metas de cada página direto, sem libs externas ou gambiarras.

O que o React Router não entrega

Mesmo depois de tanto tempo, React Router não tem forma oficial de definir títulos de páginas ou metadados. Muita gente usa hooks e manipula via useEffect, o que acaba trazendo problema de acessibilidade e manutenção.

Diferença entre uso simples e uso como framework

Implementando do zero no Vite

A config envolve adicionar o plugin do TanStack Router no vite.config.ts e criar a estrutura de arquivos em /pages. Cada arquivo vira rota automaticamente, com suporte completo a params, searchParams e metadata tipo title, description, etc.

Exemplo prático: adicionando nova página

Só criar o arquivo forgot.tsx em pages e a rota /forgot já tá disponível. TanStack Router ainda gera a tipagem no arquivo routeTreeGen.ts, mantendo tudo sincronizado e seguro.

Recursos e ferramentas úteis

O futuro com TanStack Start

TanStack Start é a próxima evolução: um framework completo sobre o TanStack Router, planejado pra competir com Next.js e Remix. Vai trazer funcionalidades server-side sob demanda e offline-first integradas.