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:
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
