Gabriel Gomes
Gabriel Gomes13/12/2020 12:34
Compartilhe

Entendendo Rotas em React com React Router

  • #React

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:

image

Ou por yarn:

image

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.

image

  • Switch: Componente que organiza as rotas

image

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

image

  • Link: componente que permite redirecionar à página

image

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

image

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

image

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

image

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.
Compartilhe
Comentários (0)