Entendendo Rotas em React com React Router

13/12/2020 12:34

Gabriel Gomes

Gabriel Gomes

Brasil

  • #ReactJS

Conceito

O React Router é uma biblioteca do React que permite a navegação entre diversas partes da aplicação, como páginas.

Instalação

Por npm:

Ou por yarn:

Implementação

Para implementar o React Router de forma funcional, são necessários 4 componentes:

  • BrowserRouter: componente principal de roteamento, para navegação. Envolve todos os outros componentes do react router.

  • Switch: Componente que organiza as rotas

  • Route: Rota da página. Dentro desse componente é colocado o conteúdo da rota. Todas as Routes são colocadas dentro do Switch

  • Link: componente que permite redirecionar à página

Assim, é necessário importar esses componentes, da seguinte forma:

Em seguida é adicionado no Router, os links, e o switch com as rotas (Routes):

Redirect

Por fim, há o componente redirect, que permite fazer um redirecionamento programado. Pode ser utilizado, por exemplo, caso sua página de início deveria ser redirecionada para outra página /Home, por exemplo.

Exemplo

E esse é o funcionamento básico do Routes. Espero que tenha gostado e que esse conhecimento sirva de ajuda para a construção de suas próximas aplicações.

Obrigado pela atenção, e até a próxima.

Repositório do projeto exemplo:

https://github.com/gabriels6/react-routes-test

Obs: Caso haja alguim erro ou incoerência no artigo, pode informar. Quaisquer críticas são bem vindas.

Faça parte da nossa comunidade!

Domine as tecnologias utilizadas pelas empresas mais inovadoras do mundo e encare seu novo desafio profissional, evoluindo em comunidade com os melhores experts.

4

Certificado

Artigo relacionado

Comentários

    Nenhum comentário