Exemplos de React Router 7 para copiar: configuração em cada modo, layouts aninhados, params, loaders e actions, rotas protegidas, páginas 404, rotas lazy e migração da v6.
O React Router 7 vem em um único pacote, react-router. Envolva o seu app em BrowserRouter para um roteamento simples, ou monte as rotas com createBrowserRouter e RouterProvider para usar loaders, actions e error boundaries. Aninhe rotas filhas sob um layout que renderiza Outlet, leia segmentos do caminho com useParams e query strings com useSearchParams.
As APIs que você mais usa
Todos os exemplos abaixo foram escritos para o React Router 7 e importam de react-router. A pequena demo no topo é funcional, então você pode clicar pelas rotas aninhadas e params; ela roda na versão do router que este site usa, indicada nela.
Não. Na v7 tudo é exportado de react-router. react-router-dom ainda instala e reexporta a mesma API para facilitar as atualizações, mas projetos novos só precisam de react-router.
O data mode é uma biblioteca: você mesmo monta o array de rotas com createBrowserRouter. O framework mode adiciona um plugin do Vite que lê app/routes.ts, divide o código por rota, gera tipos e pode renderizar no servidor.
Adicione uma rota com path "*" como a última filha da rota raiz. Ela corresponde a qualquer URL que nada mais tenha correspondido. Em uma hospedagem estática, faça também o servidor retornar index.html para caminhos desconhecidos, para que o router tenha a chance de exibi-la.
Não, os params são sempre strings, ou undefined quando o segmento é opcional e está ausente. Converta com Number() e trate o caso em que o resultado não é um número válido.
Em grande parte, sim. Ative primeiro as seis future flags da v7 na v6 e corrija os avisos, depois atualize. O guia oficial diz que, depois disso, não há breaking changes além da troca do nome do pacote.
As três formas de usar o React Router 7
Na v7 um único pacote cobre os apps web. react-router-dom ainda existe apenas como reexportação para imports antigos.
As rotas são um array simples, o que libera loaders, actions, UI de carregamento e errorElement. Tudo é importado de react-router.
A configuração mínima e a mais próxima do código da v6. Não tem loaders nem actions; busque os dados dentro dos componentes.
O plugin do Vite de @react-router/dev lê este arquivo, divide o código por rota e gera tipos em ./+types/ para cada módulo de rota.
Cada arquivo de rota exporta o seu loader e um componente padrão. Os tipos Route gerados dão tipos reais a params e loaderData.
O pai renderiza a UI compartilhada uma vez; <Outlet /> marca onde a filha correspondente aparece. Uma rota sem path, como a de baixo, é uma rota de layout.
Um segmento que começa com dois-pontos vira um param. Os params são sempre strings, então converta os números você mesmo.
Funciona como useState, mas guarda o valor na query string, então os filtros sobrevivem a um refresh e podem ser compartilhados como link.
O loader roda antes de a rota renderizar. Enviar <Form method="post"> chama a action e, quando ela termina, o router recarrega os loaders da página. Retorne objetos simples; json() e defer() estão obsoletos na v7.
Verifique a sessão em um loader pai e redirecione antes de qualquer filha renderizar. Passe o caminho original para poder mandar as pessoas de volta depois do login.
Sem loaders, um componente wrapper verifica a autenticação e renderiza <Navigate> no lugar da página.
Um path * captura qualquer URL que nada mais tenha correspondido. errorElement (ou ErrorBoundary como componente) renderiza quando um loader, uma action ou a renderização lança um erro; useRouteError diz o que foi lançado.
lazy carrega o código de uma rota na primeira vez que alguém a visita. Retorne as propriedades da rota que você quer preencher, como Component e loader.
Renderize <ScrollRestoration /> uma vez no layout raiz de um data router. Ele rola para o topo em páginas novas e restaura a posição anterior ao voltar e avançar.
Com todas as future flags ativadas na v6, a mudança para a v7 não deve exigir nenhuma outra alteração de código. Publique cada flag separadamente para que um problema seja fácil de rastrear. A versão 8 também já saiu; a atualização funciona do mesmo jeito, com um novo conjunto de flags v8_ que você ativa ainda na 7.
Passando da v6 para a v7
Um router dentro da página rodando react-router-dom 6.30 (a versão que este site usa, não a v7). Ele tem um layout /shop com uma lista de produtos e páginas de detalhe /shop/:productId, um search param ?sort e um 404 catch-all. O código das rotas é o mesmo na v7.
Demo
Início
Loja
Link quebrado
URL:
Layout da loja
Ordenar (search param)
Nome
Preço
Nenhum produto chamado "{id}".
useParams() retornou productId =
Voltar para a lista
Demo ao vivo: rotas aninhadas e params
Página inicial. Abra a loja.
404: a rota catch-all correspondeu.
Comece grátis · Sem cartão de crédito