Gerenciamento de Rotas no React com React Router \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 15 Horas 48 Min 36 Seg Tempo restante da oferta: 15 48 36 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Gerenciamento de Rotas no React com React Router [ React ](https://www.treinaweb.com.br/blog/categoria/react) # Gerenciamento de Rotas no React com React Router Neste artigo vamos abordar um conceito importante dentro de aplicações com o React, O gerenciamento de Rotas no React com React Router. [ Ariel Sardinha ](https://www.treinaweb.com.br/blog/autor/ariel-sardinha) 4 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/03/REACT-ROUTER.jpg) O [React Router](https://reactrouter.com/en/main "React Router") é uma biblioteca para gerenciamento de rotas em aplicativos [React](https://www.treinaweb.com.br/blog/conheca-o-react-biblioteca-para-desenvolvimento-web "React") e com ele podemos configurar a navegação entre as páginas de nosso projeto de forma simples e com muitos benefícios. Nos sites tradicionais, ao clicar em um link, o navegador solicita um novo documento [HTML](https://www.treinaweb.com.br/blog/o-que-e-html "HTML") para o servidor, carregando todos os documentos HTML, CSS e [JavaScript](https://www.treinaweb.com.br/blog/o-que-e-e-como-comecar-com-javascript "JavaScript") em cada nova tela. O React Router permite que, ao clicar em um link, o site atualize a página sem fazer outra solicitação para o servidor. Com isso, o site pode renderizar imediatamente a próxima tela. [ ![React - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/react.svg) Curso React - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/react-fundamentos) ## Instalação Antes de começarmos a explicar todo o processo de instalação do React Router, vamos precisar criar um novo projeto React. Para isso, basta executar o seguinte comando: ```bash npx create-react-app my-app ``` Caso você esteja com dúvidas sobre como instalar e rodar o React, você pode ler o seguinte artigo: [Como instalar e executar o React](https://www.treinaweb.com.br/blog/como-instalar-e-executar-o-react "Como instalar e executar o React") Agora, basta instalar a biblioteca do React Router. No entanto, estamos utilizando como exemplo uma aplicação web, então teremos que instalar o pacote `react-router-dom`, com o seguinte comando: ```bash npm install react-router-dom ``` ## Configurando roteamento Para configurar o React Router em um projeto React, o primeiro passo é criar um roteador do navegador e configurar a primeira rota. Isso pode ser feito no arquivo principal do React, o `index.js`. ```JSX import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import { createBrowserRouter, } from "react-router-dom"; const router = createBrowserRouter([]); const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); ``` O método `createBrowserRouter` é o método recomendado para todos os projetos da web. Podemos criar um objeto de configuração dentro da lista no `createBrowserRouter`, que nada mais é que a configuração das rotas ```JSX const router = createBrowserRouter([ { path: "/", element: Hello world!, }, ]); ``` A propriedade `path` indica o endpoint do navegador e a propriedade `element` é justamente o JSX que irá renderizar na tela. Agora precisamos substituir o componente `App` por `RouterProvider` e passar a constante `router` no provider. O `RouterProvider` é responsável por rotear todos os componentes passados no `createBrowserRouter`. Com isso, teremos o seguinte cenário: ```JSX import React from 'react'; import ReactDOM from 'react-dom/client'; import { createBrowserRouter, RouterProvider } from "react-router-dom"; const router = createBrowserRouter([ { path: "/", element: Hello world!, }, ]); const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); ``` [ ![React - Despertando o Poder dos Hooks](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/react.svg) Curso React - Despertando o Poder dos Hooks Conhecer o curso ](https://www.treinaweb.com.br/curso/react-despertando-o-poder-dos-hooks) ## Componente Home e Sobre Agora vamos criar dois componentes para utilizar, que vão servir como as novas telas. O primeiro será a tela `Home`. Então crie um arquivo `home.js` e adicione o seguinte componente: ```JSX import { Link } from 'react-router-dom' export default function Home() { return ( Home Ir para Sobre ); } ``` Agora o componente `Sobre`. Crie um arquivo `sobre.js` e defina o seguinte componente: ```JSX import { Link } from 'react-router-dom' export default function Sobre() { return ( Sobre Ir para Home ); } ``` Note que estamos utilizando o componente `Link`, em ambas as telas, para permitir a navegação entre elas. A propriedade `to` do componente `Link` deve ser definida com o mesmo valor do `path` que foi definido no `createBrowserRouter`. Agora basta adicionar os novos componentes no `createBrowserRouter` para que a navegação funcione: ```JSX const router = createBrowserRouter([ { path: "/", element: , }, { path: "/sobre", element: , }, ]); ``` Agora temos duas telas onde a navegação entre elas está sendo gerenciada pelo React Router. ## Conclusão O React Router é uma excelente opção para gerenciamento de rotas em projetos React, permitindo uma navegação mais fluida e sem a necessidade de fazer novas solicitações ao servidor. Com ele, podemos criar rotas facilmente e criar a navegação entre as páginas do nosso aplicativo de forma simples e intuitiva. Espero que este artigo tenha ajudado a entender melhor como configurar e utilizar o React Router em seus projetos React. Sei que você gostou deste artigo e tenho certeza de que a formação para [Desenvolvedor React Funcional](https://www.treinaweb.com.br/formacao/desenvolvedor-react-funcional "Desenvolvedor React Funcional") irá ajudá-lo a se tornar um desenvolvedor muito melhor. São **14h17 de video** com muito conteúdo e um total de **59 exercícios**. Veja quais são os cursos que fazem parte desta formação: - [React - Fundamentos](https://www.treinaweb.com.br/curso/react-fundamentos "React - Fundamentos") - [React - Dominando Componentes Funcionais](https://www.treinaweb.com.br/curso/react-dominando-componentes-funcionais "React - Dominando Componentes Funcionais") - [React - Despertando o Poder dos Hooks](https://www.treinaweb.com.br/curso/react-despertando-o-poder-dos-hooks "React - Despertando o Poder dos Hooks") - [React - Conhecendo o React Router](https://www.treinaweb.com.br/direto-ao-ponto/react-conhecendo-o-react-router "React - Conhecendo o React Router") - [React - Estilização com Emotion (Styled Components)](https://www.treinaweb.com.br/direto-ao-ponto/react-estilizacao-com-emotion-styled-components "React - Estilização com Emotion (Styled Components)") - [React - Boas práticas](https://www.treinaweb.com.br/curso/react-boas-praticas "React - Boas práticas") - [ #react ](https://www.treinaweb.com.br/blog/tag/react) - [ #react router ](https://www.treinaweb.com.br/blog/tag/react-router) - [ #gerenciamento de rotas ](https://www.treinaweb.com.br/blog/tag/gerenciamento-de-rotas) - [ #gerenciamento de rotas react ](https://www.treinaweb.com.br/blog/tag/gerenciamento-de-rotas-react) - [ #navegação react ](https://www.treinaweb.com.br/blog/tag/navegacao-react) Autor ![Ariel Sardinha](//secure.gravatar.com/avatar/d0b89ee09026eb2b9e26f286c04eba03?d=mm) ## Ariel Sardinha Professor e desenvolvedor. Formando em engenharia de software e Computação - Licenciatura. É autor de cursos em diversos temas, como, desenvolvimento front-end, Flutter, JavaScript, React,js e Vue.js. Nas horas vagas adora estudar sobre tecnologia, filmes e brincar com a pequena Maria Eduarda. [arielsardinha](https://www.linkedin.com/in/ariel-sardinha/) [Todos os artigos](https://www.treinaweb.com.br/blog/autor/ariel-sardinha) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/NEST-JS-UPLOAD-ARQUIVOS-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ Como realizar upload de arquivos locais no NestJS ](https://www.treinaweb.com.br/blog/como-realizar-upload-de-arquivos-locais-no-nestjs) Neste artigo vamos aprender a utilizar o recurso de upload de arquivos locais com o NestJS utilizando a biblioteca Multer do Express. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/ROTAS-EXPRESS-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 6 anos atrás ## [ Criando Rotas com Express.js ](https://www.treinaweb.com.br/blog/criando-rotas-com-express-js) Vamos aprender a configurar rotas com o Express.js, com exemplos utilizando as requisições GET, POST, PUT e DELETE. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/SERVIDOR-HTTP-EXPRESS-JS-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 6 anos atrás ## [ Criando um servidor HTTP com Express ](https://www.treinaweb.com.br/blog/criando-um-servidor-http-com-express) O Express é um framework utilizado em conjunto com o Node.js. Ele possui características que facilitam o desenvolvimento de nossas aplicações web e APIs, como um sistema de rotas completo, tratamento de exceções, gerenciamento de requisições HTTP e muito mais. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/12/NEST-JS-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ Autenticação: Refresh Token com NestJS ](https://www.treinaweb.com.br/blog/autenticacao-refresh-token-com-nestjs) Neste artigo vamos continuar no assunto de autenticação, abordando a estratégia de refresh token com o NestJS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/16094538/liquid-fluid-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 7 anos atrás ## [ Trabalhando com a template engine Liquid no ASP.NET Core ](https://www.treinaweb.com.br/blog/trabalhando-com-a-template-engine-liquid-no-asp-net-core) Em alguns projetos pode ser necessário substituir o Razor por outra engine template. Neste caso, aprenda como fazer esta substituição pelo Liquid. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/spring-framework-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 3 anos atrás ## [ Spring Boot - Trabalhando com Controllers ](https://www.treinaweb.com.br/blog/spring-boot-trabalhando-com-controllers) Veja nesse artigo como trabalhar com controllers em uma aplicação Spring Web MVC com Spring Boot. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/10/o-que-e-ember-js-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 6 anos atrás ## [ O que é Ember.js? ](https://www.treinaweb.com.br/blog/o-que-e-ember-js) Veja neste artigo o que é Ember.js. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/05/lambda-400x280.png) [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 7 anos atrás ## [ O que é AWS Lambda? ](https://www.treinaweb.com.br/blog/o-que-e-aws-lambda) Nesse artigo vamos conhecer o AWS Lambda, serviço de computação Serveless da AWS especializado em executar funções sem a necessidade de se preocupar com servidores. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/02/06142705/django-flask-400x280.png) [ Python ](https://www.treinaweb.com.br/blog/categoria/python) 8 anos atrás ## [ Django ou Flask, eis a questão. ](https://www.treinaweb.com.br/blog/django-ou-flask-eis-a-questao) Então você vai criar sua aplicação web com o Python, certo? Mas, me diz aí, qual framework você vai utilizar? Django ou Flask? Bom, vamos ver neste artigo qual problema cada um deles resolve. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/01/criando-uma-api-com-spring-data-jpa-e-spring-web-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 5 anos atrás ## [ Criando uma API com Spring Data JPA e Spring Web ](https://www.treinaweb.com.br/blog/criando-uma-api-com-spring-data-jpa-e-spring-web) Neste artigo vamos aprender como criar uma API com persistência de dados utilizando o Spring Web MVC e o Spring Data JPA. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/02/12200152/serverless-400x280.png) [ Computação em nuvem ](https://www.treinaweb.com.br/blog/categoria/computacao-em-nuvem) 8 anos atrás ## [ Serverless: uma introdução ](https://www.treinaweb.com.br/blog/serverless-uma-introducao) Nesse artigo uma introdução à arquitetura Serverless e um pouco sobre o AWS Lambda, um dos principais serviços do mercado. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/10/o-que-e-e-como-comecar-com-golang-400x280.jpg) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 3 anos atrás ## [ Gerenciamento de dependências no Go ](https://www.treinaweb.com.br/blog/gerenciamento-de-dependencias-no-go) Nesse artigo veremos como podemos utilizar o Go Tools para realizar o gerenciamento de dependências no Go. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **15h 48min 36s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58