Navegando entre rotas - Dominando a Componente Link e o Hook useRouter!

Fala mestre beleza o vídeo de hoje a gente vai estar falando aqui sobre realizar a navegação do usuário entre uma tela e outra usando ali o Expo Walter Então antes de a gente ir para o vídeo né Eu gostaria de pedir que você deixe um like no vídeo se inscreva no canal e também cliquem no Sininho para o YouTube te manter atualizado aí dos nossos conteúdos e também segue a gente né nos links aí das nossas redes aqui da Mestres vai dar tudo aí na descrição para você se manter sempre atualizado dos conteúdos que a

gente vem produzir Beleza meu nome é Jansen eu sou desenvolvedor aqui na Mestres e vamos lá para mais um conteúdo [Música] então eu tô aqui né já no vs code né com o nosso projeto Minha execução na aula passada a gente parou né nesse ponto aqui com essa tela inicial a gente chamou de peixe aqui eu posso até renomear ela para home e nós vamos criar outras telas aqui tá porque Nós criamos só que no diretório app né Nós criamos o arquivo index aqui que vai ser a nossa rota Inicial né o ponto de entrada

aí do aplicativo no ponto de entrada do aplicativo então o que que eu vou fazer aqui eu vou criar outras rotas tá então eu vou criar uma nova rota aqui um novo dia um novo arquivo Tá eu vou chamar ele de sobre about que vai ser aqui para gente um uma outra tela né que essa tela teria informações aí é sobre o usuário né vou chamar aqui a função de about e o conteúdo eu vou colocar aqui só um ao invés de Olá Mestres eu vou colocar um sobre tá só para a gente ver a

diferença aí entre as telas tá então eu tenho que a rota about e essa estrutura né que o Explorer tem de rotas permite a gente criar os diretórios né então que eu poderia criar um diretório e esse diretório seria por exemplo eu chamaria isso aqui de vamos chamar de compras ou melhor isso pode ser compras né vou chamar aqui de ordens e que a gente pode trazer para pedidos né ou alguma coisa do tipo vamos imaginar que a gente tá aqui em um aplicativo de delivery né então aqui pedidos eu teria por exemplo uma tela

de carrinho né eu teria que também uma tela por exemplo pagamento certo e que a gente teria as telas referentes a esse módulo aí a esse conjunto de telas que compõem aí o nosso essa parte de pedidos do aplicativo tá então o que que eu vou fazer eu vou copiar aqui a tela né Para a gente até não perder tempo digitando aqui a mesma coisa vou chamar isso aqui essa tela de kart que vai ser o carrinho e o pagamento aqui e o conteúdo vai ser pagamento certo então com essas telas criadas como que a

gente faz né para navegar de uma tela para outra a gente pode fazer isso usando aqui uma componente que o próprio Expo router é traz para gente que é eu vou até escrever aqui ó importe from que é o link essa componente aqui então usando essa componente link a gente vai conseguir navegar de uma tela para outra Então como que a gente usa ela né a gente usa aqui link eu vou abrir e fechar a tag né e ele precisa de uma propriedade ele tá até reclamando aqui que é o HF tá eu bem parecido

com o próprio halter Dom que a gente já tem na web então se aqui em HF eu passar aqui a string né about o que que vai acontecer esse esse meu link ele vai estar apontando para essa tela sobre tá então eu passo aqui um barra né eu posso colocar um conteúdo né sobre certo e aqui quando eu clicar em sobre a gente navega para nossa tela sobre tá Então nesse link ele é um rapper né ele vai ficar sempre por volta de alguma coisa então eu posso colocar ele por volta de uma imagem por

volta de um botão né ou de coisas do tipo normalmente é entre essas componentes que a gente coloca né que quando eu pressionar aquele elemento ele vai executar essa navegação então ao invés de about por exemplo se eu quisesse usar um botão né ao invés de digitar sobre aqui dentro Eu poderia usar aqui o próprio pressuble do react Nate ele não vai me sugerir Tá eu vou importar aqui do yakinete eu vou ter o pressuble e aqui dentro eu posso colocar o nosso texto né que é a tag text com o sobre escrito aqui né

E aí com isso no caso tem que voltar aqui né e agora eu posso clicar em sobre e Navegar né só que não e que ele vai dar um erro porque o eu tenho que na verdade pensando aqui na questão do nosso é estrutura né dessas componentes o link em si né ele ele tem ali as propriedades de ele ele trata o clique né o evento de pressionar é só que quando a gente coloca componentes aqui dentro esses componentes que estão dentro do link a gente precisa meio que eu não quero ser tão complexo aqui

na explicação mas é como se o Expo enviasse as propriedades do link para o componente externo né para o componente challenge que que seria o preço então para fazer isso eu tenho que vir aqui no link e definir aqui essa propriedade schald isso aqui é um boleando tá que eu passaria como truco ou então a gente só pode apagar que deixar o charge E aí com isso aqui se eu clico agora em sobre ele vai executar navegação então é como se ele tivesse pegado esse HF e o One press por exemplo do link e passou

aqui para o meu pressuble que é o botão né E aí sim quando eu pressiono o botão a Navegar só acontece então quando eu for deixar o link né Por volta de um botão ou de uma imagem ou de alguma coisa do tipo a gente tem que tomar cuidado com isso tá porque não é bem deixar eu posso deixar esse link por volta de tudo que vai funcionar Tá certo então com isso aqui a gente já consegue olha essa navegação e aqui com o preço para quem não sabe ele é uma componente de Botão realmente

do react Nate então eu conseguiria tranquilamente aqui definir as propriedades de um botão no pressle e aplicar estilização também do jeito que eu quiser tá eu tenho essa facilidade com a componente pressugo certo então com isso que feito nós temos aqui mais algum mais um jeito de Navegar que seria que é o que eles chamam de navegação interativa né que é a gente meio que navegar programaticamente falando sem ter por exemplo esse evento de clique então por exemplo um caso aqui que totalmente aleatório mas por exemplo se eu quiser Navegar usuário após 5 segundos né

eu não vou ter o a interação do usuário ali para ele clicar eu tenho que esperar passar esse tempo e aí sim eu disparar essa navegação de algum de algum lugar usando alguma coisa e essa coisa seria o que a gente usaria aqui né o router que é exportado aqui para a gente também do x power então eu vou colocar esse exemplo na tela de about a gente pode até fazer isso né o Depois de 5 segundos Navegar né é um exemplo bem aleatório mas pode ser tá então o que que eu vou fazer eu

vou definir aqui fora mesmo 7 time out certo esse está em malte aqui de dois segundos um segundo e aqui dentro eu vou importar o caso é use até aqui eu vou instanciar isso aqui certo então com essa com essa variável router aqui eu consigo realizar a navegação eu posso fazer isso aqui é o router ele tá me sugerindo aqui para fazer esse post para no nosso caso para nossa tela de carrinho tá ele já até fez né Então espera aí deixa eu voltar aqui a gente volta para sobre né e depois de um segundo

ele vai para o carrinho de compras tá então com isso aqui a gente no caso com o Walter né a gente tem outros métodos aqui que seria por Walter nós temos esses aqui né que o que que é o push a gente vai adicionar uma nova essa questão né do push esses detalhes né entre push e o principalmente o Place né é basicamente o seguinte é explicando aqui de forma rápida a gente imagina esse navegador como se fosse um baralho né Umas cartas né um jogo de cartas onde a tela que está sendo apresentada é

a tela que seria a carta de cima tá então quando eu navego que que eu faço eu pego uma carta que tá no meio ali do meu baralho e puxo ela para cima tá e assim sucessivamente sempre que eu vou navegando de uma tela para outra sempre que eu faço o push ele vai adicionar uma nova tela ali na steck né uma nova carta nesse meu baralho e o replace né O que o que ele faz é basicamente ele na verdade ele não faz esse essa questão de tirar a carta de algum lugar e colocar

por cima que que ele faz ele tira uma carta que tá dentro desse meu baralho e coloca no lugar que basicamente ele tira que tá em cima pega uma do meio do baralho e coloca por cima ele substitui a carta que está em cima ou seja a tela que está sendo apresentada e a diferença é o que com o push eu consigo voltar para tela que eu estava né com o replace não com o replace ele substitui a tela que eu estava eu meio que perco essa perca ela né eu perco esse histórico então é

meio que essas são as diferenças entre push de Place o back seria basicamente vamos voltar para tela anterior para tela antiga nesse instante aí nesse meu baralho e temos também esses sete parâmetros que a gente vai falar mais sobre ele quando a gente chegar ali nas rodas dinâmicas ou no envio de parâmetros entre uma rota e outra a gente não vai falar dele agora mas é basicamente Essa é a diferença são os métodos né que a gente mais usa que o back Punch replace e o 7 paramos também ela é bem importante mas a gente

vai falar dele no futuro beleza então para essa aula que vai ser isso tá é uma aula bem simples é uma aula que a gente é realmente simples realmente é a estrutura né é api que o Expo Walter fornece para a gente o que facilita muito essa questão de navegar entre rotas né criar as rodas em si criar ali o texto que define o pf que define a rota que lembra muito a web né então a gente começa a criar diretório dentro do diretório arquivos e os nomes dos arquivos junto com os nomes do diretórios

acabam virando aí o nome da Rota Tá certo então nas próximas aulas a gente vai tá falando mais aí sobre o exporwater Beleza então nessa aula para essa aula é isso né Eu espero aí que eu tenha ajudado qualquer dúvida pode estar deixando um comentário logo abaixo e é isso aí muito obrigado e até a próxima [Música]