"Rotas Dinâmicas Descomplicadas: Dominando Expo Router com Jancer

Fala mestre beleza no vídeo de hoje nós vamos estar falando aqui sobre as rotas dinâmicas no Expo a gente vai aplicar aqui o conceito vai ver alguns exemplos de algumas formas diferentes de estar fazendo essa navegação de fazer o uso dessas rotas dinâmicas Tá certo então antes da gente ir para o vídeo gostaria de pedir que você se inscreva no canal deixa o like no vídeo e também clique no Sininho para o YouTube te manter atualizado aí dos nossos conteúdos e também siga mestre né os links das nossas redes sociais estarão todos aí na descrição

para você acompanhar tudo que a gente vem produzindo Tá certo então meu nome é gemas sou desenvolvedor aqui na Mestres e vamos embora lá para mais um conteúdo [Música] eu fiz algumas alterações né baseado na aula passada que a gente tava vendo aqui o jeito diferente de Navegar né que a gente viu que o router a gente fazer a navegação usando router que seria basicamente Mas é uma Instância né do navegador e a gente consegue através dele fazer aqui um rauter né e o nome da Rota que a gente quer que a gente tá querendo

navegar e ele vai fazer isso para gente tá então a gente vai fazer o uso disso aqui hoje nessa aula para a gente entender melhor Essa questão aí das rotas dinâmicas tá Então qual que é a ideia por trás das rotas dinâmicas se a gente parar para estudar aqui para entender melhor a estrutura que a gente vai começar a criar para as nossas aplicações né as estruturas de navegação a gente vai começar a criar várias rodas e dar nome para essas rotas né então aqui por exemplo eu tenho esse Kart aqui nesse arquivo tsx chamado

Kart que é uma rota né que eu vou acessar ela através de barra ordens ordem né Vamos para o barra Paint porque no ordem no vídeo anterior a gente fez alguma lógica que de na verdade não né É normal que a gente fez uma lógica pode ser para a ordem é barraca carrinho aí de compras então se eu clicar aqui agora em sobre né Eu adicionei um botão e esse botão quando eu pressiono ele chama a função que estou criando aqui que vai parar navegação tá bem simples então quando eu clico em sobre que o

título do botão ficou errado é o título botão tá sobre que é o antigo ele tá falando aqui que a rota não pode ser encontrada que não é barra ordem é barra ordens com s no final do que a gente pode clicar nesse golback tá essa questão da rota não encontrada a gente vai fazer uma aula só falando sobre isso tá para a gente aprender melhor como tratar isso mas por enquanto vão usar aqui né se eu clicar aqui em goalback ele vai voltar eu posso clicar em sobre e aquele carregou o carrinho de compras

certo então com esse carrinho de compras carregado né com esse com essa estrutura que a gente criou para fazer a navegação a gente só consegue fazer a navegação para rotas com o nome exato que a gente definiu tá então qualquer outra coisa que eu vou tentar Navegar qualquer outra rota que eu for tentar Navegar e o nome estiver errado eu não vou conseguir fazer essa navegação tá E aí entra essa ideia das rotas dinâmicas que na verdade não é realmente para resolver esse problema não que isso seja um problema mas é uma forma de funcionamento

e na rota dinâmica ela vai me ter o nome da Rota né essa última parte aqui do URL né que seria que o Barra Kart Isso aqui vai poder ser dinâmico aí eu vou conseguir definir nomes diferentes e dentro da tela que tá relacionada com essa rota eu vou conseguir buscar essas informações tá então por exemplo né Vamos aqui é nós temos ordens nós temos o carrinho de compra eu vou criar aqui um novo diretório que eu vou chamar isso aqui de list tá E aqui dentro eu vou criar um novo arquivo que seria o

ids certo então eu vou copiar aqui o kart ou colar aqui eu vou mudar o nome aqui da componente né para ordenar de por exemplo ou só ordem né pode ser ordenadinho não tem problema e aqui o texto eu vou definir que isso aqui seria as informações de um no caso aqui é um pedido né traduzindo ordem seria um pedido aí ou compras formações de uma compra tá então com isso aqui agora eu consigo vir aqui no meu botão eu vou renomear para navegar certo e quando eu clicar nele eu vou ir para ordens barra

list certo se eu salvo isso aqui no emulador eu vou voltar né eu fiz um push lembra da aula passada eu expliquei Navegar a diferença do push e do replace então agora clicando em Navegar eu vim aqui né para informações de uma compra que foi essa tela que eu criei é só que aí vem a pergunta né porque compra é né E aí que vem essa rota de Não nunca ela ajuda a gente nisso e vai ajudar Principalmente quando a gente tá por exemplo trabalhando com Deep link né ou alguma coisa do tipo que porque

na verdade isso pode se tornar um padrão dentro do projeto a gente pode definir né estruturas padrões na verdade de desenvolvimento para sempre que a gente for criar uma tela a gente pensar dessa forma porque isso aqui é a mesma ideia do round para mim né do surf parâmetros que a gente tem na web tá então é muito parecido e na verdade é igual não é igual é vamos manter aqui o muito parecido Então beleza eu vou navegar aqui para ordenhar e Eu me faço a pergunta né porque que pedido é esse que compra essa

que eu quero ver essas informações e eu poderia por exemplo é que eu já vou mostrar várias formas de fazer a mesma coisa né aqui quando eu vou navegar eu tô fazendo aqui um halter.push que aqui ao invés de passar uma string eu posso passar um objeto eu vou deixar isso aqui comentado eu vou fazer aqui eu posso passar esse objeto e aqui ó eu tenho o pac-man que seria né para Que rota que eu quero ir que é esse é esse string aqui que eu defini e o segundo parâmetro seria os parâmetros né então

aqui ó arameters eu tô fazendo errado vem para cá aqui é porque eu preciso da vírgula aqui para eu posso passar por exemplo um objeto com AIDS um dois três certo e aqui quando eu faço isso eu vou conseguir Navegar para rota né para essa Rota e eu vou enviar esses parâmetros que aqui podem ser vários parâmetros tá então se eu vou se eu vier aqui na minha na minha tela né na minha na rota que eu estou na componente que eu estou navegando para eu tô navegando para ordenhar Então esse da M que Roots

ele ajudaria nesse caso onde a gente estaria fazendo uma navegação entre aspas externas e eu que eu quero apontar eu quero enviar um certo parâmetro para alguma tela específica da minha aplicação Isso tá muito relacionado com diplin caso você nunca tenha ouvido falar eu recomendo que você dê uma pesquisada aí sobre para tá entendendo melhor tá certo então o que que a gente vai fazer aqui agora eu quero navegar para minha tela a ordem/list e ao invés de eu passar aqui o Barra aí eu já vou escrever aqui que a dica é desse meu dessa

minha compra nesse meu pedido então se eu digitar aqui um dois três quatro cinco esse um dois três quatro cinco Eu quero acessar ele aqui dentro desse parâmetro Tá certo então se eu salvar isso aqui agora e eu tentar Navegar para essa rota se eu salvar isso aqui agora e tentar Navegar para essa rota ele vai dar esse problema aqui né que a rota não existe né eu não criei nenhuma nenhum arquivo aqui com o nome um dois três quatro cinco para ele é navegar para essa componente E aí para a gente fazer que que

esse nome dessa rota fique dinâmico eu posso renomear o arquivo tá então esse arquivo que ao invés dele chamar ID eu vou colocar Chaves por volta dele que a Chaves abrindo e fechando e fechando certo então abre e fecha o Chaves coloco esse nome pode ser qualquer coisa ponto tsx é que eu vou salvar né salvar essa esse novo arquivo né com esse novo nome e agora se eu salvo como eu já salvei tudo né eu vou voltar eu vou navegar de novo para essa rota que ele não encontrou de novo a rota eu vou

recarregar o aplicativo para ele recriar essas rotas e agora clicando em Navegar eu vim para a mesma componente né para a mesma Rota e aqui a gente teve um problema porque ele tá falando que o ID é um dois três tá o ID 123 foi o que eu enviei aqui como Paramos na hora que eu fiz a navegação aqui por dentro do X mas eu vou é porque tá com o mesmo nome tá aí dia aqui no nome do arquivo E aí não paramos que eu tô enviando aqui no router né quando eu faço o

push Então esse aí dica do router eu vou colocar um underline aqui na frente e vou fazer a navegação de novo e olha lá nós temos os dois AIDS agora o ID um dois três e o outro ID que é um dois três quatro cinco que é o que tava na rota tá então agora dessa forma né quando a gente fazer lá a nossa aula sobre dyname que daí mesmo que não sobre Deep link a gente vai ver isso que funcionando que é basicamente eu enviar um link para alguma pessoa que tem o aplicativo instalado

né para algum usuário do meu aplicativo e quando esse usuário clicar nesse link ele vai ser navegado direto para o meu aplicativo direto para essa tela aqui que eu estou mexendo com esse parâmetro que eu enviei de forma ali que me faz sentido né então eu posso criar lógica em cima disso e processar essas informações que chegarão via de link no meu aplicativo Tá certo então é esse que é o conceito das rotas dinâmicas tá a gente eu posso passar qualquer coisa aqui então se eu passar sei lá ao invés de um dois três eu

vou passar o famoso full ou será o mestre ordem/list barra mestre eu vou voltar aqui navegar de novo e olha lá o ID está sendo o Mestres tá então tudo que vier depois do Barra list né vai vai cair nessa rota que eu criei essa rota dinâmica Tá certo então para essa aula vai ser isso tá 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]