React Router skill

O que ela faz

O React Router funciona de modos diferentes, e código de um modo quebra no outro. A skill, mantida no repositório do próprio React Router, faz o Claude olhar o projeto antes de mexer: react-router.config.ts e app/routes.ts indicam o modo Framework, createBrowserRouter indica o Data, e BrowserRouter com Routes indica o Declarative.

Identificado o modo, ele lê o guia de referência daquele modo e a documentação que vem dentro do pacote instalado, em node_modules/react-router/docs, pra seguir a versão que o seu app usa e não a que ele lembra. Só aplica um trecho da documentação se a marca de modo dele bater com o app.

Cobre rotas, loaders e actions, formulários, fetchers, navegação, tela de carregamento, SSR, SPA e pré-renderização, middleware, parâmetros de URL, atualização de versão e o modo experimental com React Server Components. Pra trocar de modo, aponta a documentação exata de cada migração.

Nas palavras de quem fez

Quando usar

• Criar páginas e rotas novas num app em React Router
• Carregar os dados do servidor antes de a página abrir, com loader
• Fazer formulário que salva sem recarregar e mostra que está enviando
• Atualizar o React Router pra versão nova sem quebrar o app
• Migrar um app de BrowserRouter pro modo Framework

Depois de instalar, é só pedir assim

• Cria a rota /produtos/:id com loader que busca o produto e uma página de erro se ele não existir
• Esse app usa qual modo do React Router? Me explica antes de mexer em qualquer coisa
• Atualiza o React Router e liga as future flags seguindo o guia da versão instalada

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

• Gen Agent Trust HubPassou
• SocketPassou
• SnykPassou

Perguntas