⚡️ React Router v7: mais que rotas, é uma plataforma
Se você ainda pensa que o React Router serve só pra navegação entre páginas, tá na hora de conhecer o v7.
Essa versão trouxe uma reestruturação completa inspirada no Remix, transformando o router numa plataforma de construção de apps fullstack dentro do React.
🔧 Roteamento baseado em objetos
Agora você não define rotas com , mas sim com objetos JS:
const router = createBrowserRouter([
{
path: "/",
element: <RootLayout />,
children: [
{ path: "dashboard", element: <Dashboard /> },
{ path: "settings", element: <Settings /> },
],
},
]);
Facilita modularização, compartilhamento e geração dinâmica.
📦 Loaders e Actions
Você pode carregar dados antes da renderização da rota e processar formulários com action.
{
path: "profile",
loader: async () => fetch("/api/profile"),
action: async ({ request }) => {
const formData = await request.formData();
return updateUser(formData);
},
}
Sem mais useEffect pra buscar dados.
💥 Error boundaries por rota
Cada rota pode ter seu próprio errorElement:
{
path: "dashboard",
element: <Dashboard />,
errorElement: <DashboardError />,
}
Se der erro em dashboard, só ele quebra. Nada de tela branca global.
🧠 Componentes inteligentes
: envia dados usando action, sem JS extra.: redireciona com lógica.
: encaixa rotas aninhadas no layout.
⚙️ Fetchers
Use useFetcher() pra interações fora do ciclo da rota atual:
const fetcher = useFetcher();
<fetcher.Form method="post" action="/api/search">
<input name="q" />
<button type="submit">Buscar</button>
</fetcher.Form>
Perfeito pra popups, filtros, buscas e componentes independentes.
🧬 SSR, SSG, SPA? Tudo.
Com createStaticHandler + createStaticRouter, você pode renderizar do servidor com preload de dados, caching, streaming, etc.
🔁 Remix + React Router: agora é um só
Se você já usa Remix, está usando React Router v7.
Se você usa React puro, pode ter quase tudo do Remix sem sair do lugar.
🚀 Conclusão
O React Router v7 não é só navegação. É arquitetura de aplicação.
Roteamento, dados, mutações e erros — tudo centralizado e previsível.
Se você tá começando um projeto novo: considere começar com RRv7.
Se usa Remix: você já está no futuro.