Primeiras aulas do curso React Router: navegação em uma SPA

React Router: navegação em uma SPA

Router - Apresentação

Olá, meu nome é Felipe Nascimento, sou instrutor na Alura e quero convidar você a fazer esse curso de React Router conosco.

Você vai aprender como funciona a navegação dentro de um SPA, ou uma Single Page Application. Vamos construir uma aplicação e, dentro dela, utilizar conceitos de navegação para construir todas as funcionalidades pedidas.

Para isso, vamos utilizar uma biblioteca que hoje é largamente utilizada no mercado, chamada React Router. Ela vai oferecer para nós alguns routes e componentes que vamos utilizar para construirmos toda a nossa aplicação.

Fazendo esse curso, vamos criar essa aplicação aqui, que é o Blog do Doguito. Então, aqui vamos ter os posts exibidos, reparem que ele tem duas categorias, que é “bem-estar” e “comportamento”, cada post aqui está separado por cor, então, se eu clico em “bem-estar”, ele me mostra aqui mais duas subcategorias e estamos refinando a busca para o usuário.

Se eu clico aqui em “higiene”, ele mostra os posts relacionados à higiene. Então, temos aqui dentro rotas alinhadas, estamos trabalhando com links alinhados, e muito mais.

Fazendo esse curso, vamos criar o Doguito Blog e os pré-requisitos para ele, são os React Function Components, porque não vamos utilizar classe durante a construção desse projeto, e o React Hooks, porque vamos fazer busca para a API, então, utilizaremos o “useEffect” e trabalharemos com o estado, utilizando o “useState”, então já é bom você saber do que se trata esses dois routes.

E, para quem é esse curso? Se você já manja bastante de React ou já construiu diversas aplicações, esse curso não vai ser indicado para você porque ele tem uma pegada mais iniciante, é para quem ainda está dando os primeiros passos em React e quer aprender como funciona a navegação dentro de uma SPA.

Então, sabendo de tudo isso, vamos começar.

Router - Início do problema

Tudo certo, pessoal? Já estou com a aplicação do blog aberta no VS Code. Vocês podem utilizar o editor que vocês sentirem confortáveis, eu recomendo usar o VS Code para mantermos uma paridade visual.

Primeira coisa que vamos fazer, “Ctrl + J” para abrir o Terminal, e dentro do projeto do Petshot, eu vou fazer um npm install. Por quê? Porque eu vou baixar todas as dependências que eu preciso para rodar o projeto.

Então, o projeto vem sem o Node Modules, por isso, tenho que fazer o npm install. Pode demorar porque vai baixar, é um número razoável de dependência, então vou fechar aqui enquanto ele vai fazendo esse trabalho.

E aqui em “paginas”, do canto esquerdo, nessa pasta de “paginas”, eu tenho dois componentes, um “Home” e um “Sobre”. Se eu clicar aqui no “Home”, eu tenho aqui, por enquanto, o título da página, Pet notícias, eu tenho o título do post, que é Banho no cão, e eu tenho aqui o post escrito dentro desse parágrafo.

Lá no “Sobre”, eu tenho aqui um componente que vai me mostrar sobre o que é o blog. Então, a nossa primeira tarefa é exibir esses dois componentes assim que nós inicializarmos a nossa aplicação.

Então, “Ctrl + J” aqui, vamos ver o que está acontecendo. Ele abriu o “Terminal” com “Ctrl + J”, ainda está instalando, então, vou fechar aqui, ele vai ficar pensando, e o que eu vou fazer enquanto ele baixa as dependências?

Vou lá no “App.jsx”, e o que eu vou fazer? Vou importar “Home” e “Sobre” aqui no “App.jsx”. Então, import Home from ‘./paginas/Home’, e vou importar também o import Sobre from ‘./paginas/Sobre’. Já temos os dois componentes e já podemos utilizá-los dentro do “App.jsx”.

Então, vou fazer o quê? Quando ele carregar, inicializar a minha aplicação, eu quero que ele exiba aqui dentro do return, o <Home />, e quero exibir também o <Sobre />.

Salvei, “Ctrl + J” para abrir de novo, e ele carregou, ele demorou um pouco aqui, dependendo da sua internet pode ir mais rápido ou mais lento, enfim. Vou limpar aqui o “Terminal”, clear, limpei, e npm start, ele vai rodar o projeto, vai pensar um pouco aqui e vai abrir o navegador padrão.

O meu é o Chrome, então ele vai abrir aqui, está startando, e vai ficar carregando aqui. Enquanto isso, nós voltamos o VS Code e eu vou fechar aqui o Terminal. Então, o que fizemos até agora? Nós importamos os dois componentes que já estão criados dentro da pasta “paginas” para dentro do “App.jsx”. Assim, quando ele for inicializado, ele vai exibir “Home” e “Sobre”.

Vamos voltar lá no Chrome. “Pet notícias”, o post e “Sobre”, que é sobre o Blog do Doguito. Mas não queremos isso, eu quero um comportamento semelhante, por exemplo, ao site da Alura, “alura.com.br”.

Aqui, a página inicial está exibindo conteúdo relacionado à página inicial. Se eu voltar aqui na nossa aplicação, o post é da página inicial, o “Sobre” teria que ser uma página “/sobre”, do mesmo jeito que aqui, se eu voltar no site da Alura e clicar em “Como Funciona”, ele vai “alura.com.br/como-funciona”.

Então, o que eu quero é simular esse comportamento na nossa aplicação. Vou fechar aqui a Alura, vou voltar no VS Code. Vou criar uma função chamada Router que será uma arrow function. Dentro dela eu vou, primeiro, pegar o nome de onde eu estou na página.

Então, voltando aqui no Chrome, eu vou dizer que eu estou em “localhost:3000”, então volto lá no VS Code. Como eu faço isso? Vou fazer aqui const location, vou utilizar aqui o JavaScript, então window, que é a página toda, .location.pathname, que é o nome exato do caminho.

E agora eu faço uma verificação, então, if(location === ‘/sobre’), eu vou exibir o componente return <Sobre />. else, caso contrário, eu vou exibir o return <Home />.

E aqui nós apagamos o Home e o Sobre. Estamos dentro do “jsx”, então, para usar o JavaScript lá dentro, nós precisamos de chaves, e aqui eu chamo o Router() e o executo.

Então, o comportamento esperado é, ao acessar o /sobre, ele renderiza o componente “Sobre”; ao acessar qualquer outro lugar que não seja o Sobre, ele vai renderizar o “Home”.

Então, vamos voltar lá na nossa página, no Chrome. Eu não estou no “/sobre”, ou seja, ele já considerou o componente que é o post do “Banho no cão”. Agora, se eu vir aqui na barra de endereços e faço um “/sobre”, ele renderizou as informações sobre a parte de “Sobre” do nosso blog.

Porém (vamos voltar lá no VS Code), o nosso blog vai ter mais rotas, mais caminhos que eu quero acessar. Não me parece interessante ter um if muito grande para verificar onde eu estou na página.

Então, será que eu vou ter que ficar fazendo vários ifs caso eu tenha mais rotas para acessar na nossa aplicação?

Router - React Router

Deixei um questionamento sobre adicionar outras rotas na nossa aplicação, eu vou ter que colocar dentro do if? Ou seja, vou ter que adicionar um if para cada rota nova para renderizar o componente que diz respeito àquela rota?

Do jeito que estamos fazendo aqui, sim. Parece uma boa ideia? Não. Imagina, se eu tiver aqui várias rotas, vinte, trinta rotas diferentes para renderizar componentes diferentes, eu vou aumentar a complexidade do meu projeto.

Então, eu teria um jeito de abstrair todo esse processo que criamos aqui de, se eu estou na rota tal, exibe o componente que é daquela rota, e como que eu busco onde eu estou naquela página. Aqui, fizemos com o window.location.pathname.

Outras pessoas já esbarraram em casos semelhantes e criaram uma abstração para trabalharmos com rotas dentro do React, e vamos utilizar essa abstração, que é uma biblioteca chamada React Router Dom.

Então, vamos voltar lá no Chrome, eu vou abrir uma aba nova aqui e vou – “npmjs.com” – procurar essa lib, então é “react router dom”. Vou dar um “Enter” aqui, é a primeira aqui. Reparem que aqui tem tudo que diz respeito a essa lib, então tem o jeito de instalar aqui com npm install –save react-router-dom.

Downloads semanais, três milhões e alguma coisa. Reparem que muita gente usa essa biblioteca. A versão que eu estou utilizando é a 5.2.0, e aqui no canto direito tem esse “Install”, só vou clicar aqui, ele vai copiar para mim e eu vou voltar no VS Code, “Ctrl + J” para abrir o Terminal.

Eu vou parar o servidor, “Ctrl + C”, vou limpar aqui, clear, e vou “Ctrl + Shift + V”, vou colar o react-router-dom e vou instalá-lo na nossa aplicação como dependência. Então, aqui vocês já sabem, vai instalar algo lá do npm, pode demorar muito, pode demorar moderado, depende da internet, depende de outros fatores.

Então, o que eu vou fazer? Eu vou fechar aqui porque com certeza vai demorar. Só porque eu falei, adiantou, mas eu vou fechar, porque ele vai demorar. Então, eu não vou usar mais a função Render que eu criei aqui, então vou excluir, e aqui dentro do return eu não vou utilizar mais nada, vou deixar só return puro.

Vamos “Ctrl + J”, está quase terminando. Enquanto ele termina de instalar, eu vou importar ele no nosso projeto. Como eu importo o React Router Dom? Dentro do React Router Dom, se voltarmos lá no Chrome, reparem que aqui embaixo ele fala para usar como ES6 módulo, então posso importar BrowseRouter, Route, Link.

Então, dentro tem vários componentes que vão fazer, cada um, uma coisa. A primeira coisa que vamos utilizar é o BrowseRouter. Lá no nosso projeto, no Visual Studio Code, aqui com certeza já carregou, eu vou limpar de novo, clear, npm start para subir o servidor.

Aqui eu coloquei um t que não existe, ou existe? Subiu o nosso servidor, então esse aqui que estava aqui antes não existe mais, vou fechar. Vou voltar lá no VS Code, aqui é import. E agora, o que eu vou fazer? Usar o BrowserRouter, então, import {BrowserRouter} from ‘react-router-dom’.

Então, muitas pessoas gostam de encurtar o Browser Router, eu posso nomeá-lo aqui, então as Router, ou seja, eu estou chamando o BrowserRouter de Router.

E eu posso utilizá-lo dentro do return, <Router>, e fecha o </Router>. Aqui, eu estou indicando para a aplicação que eu já vou trabalhar com sistemas de rota. Dentro do Router, o que eu vou exibir? Os componentes que tínhamos antes, então, <Home /> e o <Sobre />.

Se voltarmos na nossa aplicação, vou atualizar aqui, então reparem que ele está exibindo os dois componentes ao mesmo tempo. O que eu quero é indicar para ele que, se eu tiver aqui no barra, para ele exibir somente o “Banho do cão” que é o post.

Então, vamos voltar lá no VS Code. Como que fazemos isso? Lembra que estávamos fazendo isso com if, então aqui vamos utilizar outro componente do React Router Dom chamado Route.

E cada um desses Routes vai envelopar um componente, então, aqui dentro eu faço um Route, copiar ele aqui, em cima vai um <Route>, embaixo um </Route> fechado do componente.

A mesma coisa no Sobre, então, colar aqui o Route, um aberto e outro fechado. Agora, já estou indicando que cada um desses componentes é uma rota. Se eu voltar lá no Chrome, vou atualizar a página, reparem que ele ainda está exibindo. Se eu for no “/sobre”, o que vai acontecer? A mesma coisa, ele está exibindo vários componentes.

Então, eu tenho que indicar, além do Route, vamos voltar no VS Code. Lembra que eu usava o window-pathname? Então, aqui vamos fazer a mesma coisa, eu vou falar que o path vai ser /, e o path do Sobre, /sobre.

Então, vamos voltar lá no Chrome, atualizar aqui a página – está no “/sobre” aqui. Então, estou na página inicial, no barra, “/”, ele exibiu “Banho no cão”, que é o post, que as pessoas vão ver assim que entrarem na página inicial do nosso blog.

E quando eu for no “/sobre”, ele exibiu junto o componente do “Banho de cão”, que é o componente do post, que é para ser exibido somente quando eu entro na página “Home”. Então, no “/sobre”, é para exibir somente o componente “Sobre Doguito”. Por que será que isso acontece?

Sobre o curso React Router: navegação em uma SPA

O curso React Router: navegação em uma SPA possui 107 minutos de vídeos, em um total de 40 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda React acessando integralmente esse e outros cursos, comece hoje!

Plus

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$85
à vista R$1.020
Matricule-se

Pro

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas