4

Entendendo Rotas em React com React Router

#ReactJS
Gabriel Gomes
Gabriel Gomes

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.
0
41

Comentários (0)

None

Brasil