React Router OUTLET Você Precisa Saber Como Usar Esse Recurso!

แชร์
ฝัง
  • เผยแพร่เมื่อ 30 ต.ค. 2024

ความคิดเห็น • 92

  • @pedrohenriquegomesbarbosa7098
    @pedrohenriquegomesbarbosa7098 2 ปีที่แล้ว +40

    Ótimo vídeo, João! Gostei muito das funcionalidades dessa nova versão do react router também.
    Só compartilhando um plus: nesse é possível vc passar uma prop context e passar qualquer informação que desejar ali, na qual vai ser passado para todos os componentes filhos. Exemplo:
    // no componente Layout
    Sendo assim, todos os componentes filhos tem acesso a essa prop name pelo novo hook useOutletContext que vc importa do react-router-dom também. Para acessar essa prop, tanto a PageA ou a PageB que são filhos do Layout, vc faria simplesmente isso -> const { name } = useOutletContext();

    • @joaobibiano
      @joaobibiano  2 ปีที่แล้ว +1

      Excelente comentário Pedro!! Muito obrigado

    • @ramonbosi1638
      @ramonbosi1638 2 ปีที่แล้ว +5

      Esse é um daqueles comentário que agrega bastante conhecimento mesmo tendo terminado o vídeo
      Parabéns pela iniciativa de dividir seu conhecimento conosco!!!

    • @CorlStream
      @CorlStream 2 ปีที่แล้ว

      obrigado por compartilhar essa possibilidade!

  • @MichaelSantos4508
    @MichaelSantos4508 2 ปีที่แล้ว +11

    Em 13:25 min eu entendi o que o cara não explicou em 3 horas... Parabéns pelo excelente conteúdo e forma de nos repassar o conhecimento!

    • @joaobibiano
      @joaobibiano  2 ปีที่แล้ว +1

      Valeu Michel, obrigado!

  • @pmshadow
    @pmshadow ปีที่แล้ว +1

    João, passei algumas horas batendo cabeça com um outro desenvolvedor para resolver esse router e outlet e seu vídeo resolveu para mim! Muitíssimo obrigado!!
    Considera colocar aquele botãozinho de doação nos teus vídeos? Gosto de retribuir para quem ajuda desse jeito!!
    Abraço

    • @joaobibiano
      @joaobibiano  ปีที่แล้ว +1

      Obrigado pelo suporte! Acabei de adicionar uma opção de 4,99 por mês! Vou receber sugestões por lá

  • @ronaldtomaz8155
    @ronaldtomaz8155 2 ปีที่แล้ว +1

    Olha o homem de volta hein...

  • @ubiratanviana-jq9ym
    @ubiratanviana-jq9ym 9 หลายเดือนก่อน

    melhor video sobre react router do youtube

  • @ygaaaoo
    @ygaaaoo ปีที่แล้ว +3

    MUITOOOOOOOO OBRIGADO CARA. man, to fazendo um curso de um gringo na udemy e gastei mó tempo tentando entender isso e não entendi.. aí fui pra documentação e passei umas 4h horas lendo e fazendo junto com o tutorial e ainda sim não consegui, agora com seu exemplo eu entendi 100% como functiona isso... carai man, obrigado mesmo 🙏

    • @joaobibiano
      @joaobibiano  ปีที่แล้ว

      Fico muito feliz de saber Igor! Valeu pelo apoio.

  • @jr.furtado283
    @jr.furtado283 7 หลายเดือนก่อน

    Salvou demais!!!! Aulas de 30 minutos não explicaram metade disso e ainda complicaram mais ainda.
    Obrigado!!!

  • @oliveirafocs
    @oliveirafocs ปีที่แล้ว +1

    Melhor conteúdo sobre o outlet! Parabéns, conseguiu explicar de uma forma muito boa.

  • @muriloalves3108
    @muriloalves3108 ปีที่แล้ว +1

    Você conseguiu me passar uma informação de uma forma tão faaaacil, parabéns !!

    • @joaobibiano
      @joaobibiano  ปีที่แล้ว

      Obrigado Murilo! Acabei de adicionar uma opção de membros exclusiva aqui no youtube! Vou receber sugestões por lá, veja se faz sentido pra ti, começa a partir de R$ 4,99

  • @ImLucasAbrantes
    @ImLucasAbrantes ปีที่แล้ว +2

    Muito obrigado por disponibilizar o seu tempo e nos ensinar Outlet de uma forma tão prática!

    • @joaobibiano
      @joaobibiano  ปีที่แล้ว +1

      Obrigado Lucas! Acabei de adicionar uma opção de membros exclusiva aqui no youtube! Vou receber sugestões por lá, veja se faz sentido pra ti, começa a partir de R$ 4,99

  • @brunnocristianno
    @brunnocristianno 2 ปีที่แล้ว +3

    Manoo, serio, cada vez que ele explica da vontade de curtir e inscrever de novo hahaha Ótimo conteudo brother!

  • @WesleySilva-is8rx
    @WesleySilva-is8rx ปีที่แล้ว +2

    Top! Eu estou estudando ReactJS e os cursos estão nas versões anteriores da biblioteca React Router, tipo V5, extourando V6 sem a Outlet. Entretanto, gosto de olhar as documentações e, no momento que estou vendo esse vídeo, o React Router está na versão 6.14.2 com novas features implementadas ainda mais massa!

    • @joaobibiano
      @joaobibiano  ปีที่แล้ว +2

      Sem dúvidas, e confesso que, embora hajam melhorias, eles estão em um fluxo muito grande de breaking changes, e não me sinto nada confortável com isso... a cada 6 meses tenho a impressão que mudam "tudo"

    • @Fenderoutside
      @Fenderoutside 11 หลายเดือนก่อน

      Tbm não curto muito tanta mudança

  • @niedjalucena4626
    @niedjalucena4626 ปีที่แล้ว +1

    Excelente vídeo! Obrigada por compartilhar!

  • @jorgylemos
    @jorgylemos 2 ปีที่แล้ว +2

    Você é foda! Desculpe pela expressão rsrs, mas era uma solução que eu estava procurando para organizar melhor minhas rotas. Eu fazia um "gato" com as rotas, só pra puxar uma página dentro de outra. Assisto mais seus vídeos do que os da faculdade rsrsrs!

    • @joaobibiano
      @joaobibiano  2 ปีที่แล้ว +2

      Que bom Jorge! Sensacional.

  • @gabrielcamelo3632
    @gabrielcamelo3632 ปีที่แล้ว +1

    muito boa a aula

  • @joelitonpimenta7765
    @joelitonpimenta7765 2 ปีที่แล้ว +1

    você é fora de série João

  • @batinimagus
    @batinimagus ปีที่แล้ว +2

    Excelente vídeo!
    Estou aprendendo programação de software, e é da minha natureza entender um pouco mais sobre alguns recursos quando fica uma dúvida do tipo "Como isso funciona mesmo?"
    Li a documentação, vi uns exemplos, mas o seu vídeo conseguiu explicar tudo e um pouco mais!
    Muito obrigado!

    • @joaobibiano
      @joaobibiano  ปีที่แล้ว

      Valeu Ventura! abraço

  • @HeitorPants
    @HeitorPants 2 ปีที่แล้ว +1

    massa demais, estou usando o Outlet em uma SPA de um restaurante, e que delícinha é alternar as rotas por ele, com sua explicação ficou tudo mais claro

  • @deywid.felipe
    @deywid.felipe 2 ปีที่แล้ว +5

    ótima aula! adiciono que você pode usar o path=index em uma das childrens caso queira deixa-la como default e o seu render ocorra ao acessar a parent route

  • @hectortavares07
    @hectortavares07 ปีที่แล้ว +1

    Parabéns pelo vídeo!
    Ótima explicação!

  • @Sr-oj7wd
    @Sr-oj7wd ปีที่แล้ว +1

    Nossa mto obrigado por este vídeo cara, me ajudou DMS, já me inscrevi ❤

  • @MarcosSarges
    @MarcosSarges 2 ปีที่แล้ว +1

    Muito massa essa função do outlet.

  • @johnattandias9846
    @johnattandias9846 ปีที่แล้ว

    Eu tava com tanto problmea, me ajudou muito. Obrigado

    • @joaobibiano
      @joaobibiano  ปีที่แล้ว

      Opa obrigado pelo comentário john! Compartilha o canal com mais pessoas ;)

  • @CorlStream
    @CorlStream 2 ปีที่แล้ว +1

    ótima explicação, muito obrigado!

  • @vinilsimoes
    @vinilsimoes 2 ปีที่แล้ว +2

    Didática sensacional, João!! Muito obrigado :)

  • @pablotexeira7579
    @pablotexeira7579 2 ปีที่แล้ว +1

    excelente explicação, ganhou um sub!!!

  • @Socialtipsyoutube
    @Socialtipsyoutube ปีที่แล้ว +1

    Muito didático! parabens.

  • @luizcarvalho9982
    @luizcarvalho9982 ปีที่แล้ว

    Mano, muito obrigado pelo vídeo. Fui esclarecedor! Parabéns!

    • @joaobibiano
      @joaobibiano  ปีที่แล้ว +1

      Obrigado Luiz! Acabei de adicionar uma opção de membros exclusiva aqui no youtube! Vou receber sugestões por lá, veja se faz sentido pra ti, começa a partir de R$ 4,99

  • @rutherking
    @rutherking ปีที่แล้ว +1

    Muitoo obrigado, isso vai me ajudar muito no meu projeto!

    • @joaobibiano
      @joaobibiano  ปีที่แล้ว

      Valeu pelo feedback Ruther!

  • @LM_Producoes
    @LM_Producoes 2 ปีที่แล้ว +1

    Ótimo conteúdo , continue assim . Vc é uma grande inspiração para mim.

  • @gabrielgoncalves2557
    @gabrielgoncalves2557 ปีที่แล้ว +1

    Muito foda, melhorou demais a vida

  • @WikiPUNCH
    @WikiPUNCH ปีที่แล้ว +1

    Explicação muito boa, valeu demais

  • @Leonardo-rj8ec
    @Leonardo-rj8ec 2 ปีที่แล้ว +1

    Muito Bom o vídeo! bem explicado e gostei muito da sua didática

  • @filipezampieri
    @filipezampieri 2 ปีที่แล้ว +1

    Show de bola o video, explicou de forma clara!

  • @renatoAllArt
    @renatoAllArt 2 ปีที่แล้ว +1

    Muito loko esse recurso! vlw pelo video!

  • @palacystudios9350
    @palacystudios9350 6 หลายเดือนก่อน +1

    ótimo vídeo

  • @devweb7926
    @devweb7926 2 ปีที่แล้ว +1

    Nossa que top, extremamente útil

  • @NeroDantesco
    @NeroDantesco 2 ปีที่แล้ว +1

    Parabens video e expicação excelente

  • @tabordamarcos
    @tabordamarcos 2 ปีที่แล้ว +1

    Curti o vídeo pela simplicidade que explicou, eu atualmente utilizava desde a versão beta, porém tenho utilizado ele, passando um objeto com as rotas. Dai eu utilizo aquele hook, acho que é 'useRoutes' algo desse tipo para renderizar.

  • @MarxismoERevolucao
    @MarxismoERevolucao 7 หลายเดือนก่อน

    Gostei muito! Ajudou bastante no meu projeto.
    Se surgir uma oportunidade, João Bibiano, gostaria de marcar uma reunião contigo. Gostei da sua didática e estou com um projeto que pode te interessar, como criador de conteúdo educacional.

  • @omorelli
    @omorelli 5 หลายเดือนก่อน +1

    Qual abordagem você usa para que um compoment não renderizei em rotas específicas?
    Exemplo: Na página de erro 404 e página de login não há necessidade de mostrar o rodapé e o cabeçalho com menu etc... Como faria para remover de dessas rotas?

    • @joaobibiano
      @joaobibiano  5 หลายเดือนก่อน

      tenha um layout que aceite props e renderize baseado nisso, ou use Next e o sistema de layout dele.

  • @MatheusSilva-qm3ph
    @MatheusSilva-qm3ph 2 ปีที่แล้ว +1

    Muito bom.
    Gostaria de ver rotas de clientes e admin.
    Como identificar quem usa cada rota.
    Obrigado.

    • @joaobibiano
      @joaobibiano  2 ปีที่แล้ว +1

      Obrigado!
      Aproveita e se inscreve no canal para não perder os próximos!

    • @MatheusSilva-qm3ph
      @MatheusSilva-qm3ph 2 ปีที่แล้ว +1

      @@joaobibiano já sou inscrito, há umas semanas.

  • @J.Thiag0
    @J.Thiag0 ปีที่แล้ว +2

    Just what i needed

  • @johnnydeymisson1842
    @johnnydeymisson1842 8 หลายเดือนก่อน

    Fala mestre, cara fiquei com dúvida de como aplicar o nested router, no caso, seria para quando eu tenho um conteúdo no pai, que os filhos tbm vão herdar esse conteúdo, correto? No caso, se eu não quiser que o filho herde nada do pai, como que ficaria? Um exemplo, tenho uma página chamada usuários, onde sua rota ficará /users, dentro de users, vai vim users/create e users/edit/:id, minha dúvida é, eu crio rotas separadas para não herdar nada do users?

  • @pazfelipe
    @pazfelipe 2 ปีที่แล้ว +2

    Mto próximo se não igual ao que já sempre existiu no Vue que é o router-view.

    • @joaobibiano
      @joaobibiano  2 ปีที่แล้ว

      Obrigado por compartilhar Felipe!

  • @tinho1990a
    @tinho1990a 2 ปีที่แล้ว

    Legal, parece o Dudu Camargo o que deixa mais divertido ainda hahahahaha

    • @joaobibiano
      @joaobibiano  2 ปีที่แล้ว +1

      eita, não sei quem é, vou ver

    • @tinho1990a
      @tinho1990a 2 ปีที่แล้ว

      @@joaobibiano só zueirinha, mas seu equilíbrio entre didática e entretenimento é bem impressionante, parabéns.

  • @PauloRoberto-qq2zq
    @PauloRoberto-qq2zq 2 หลายเดือนก่อน

    Muito bom

  • @guilhermereale4385
    @guilhermereale4385 ปีที่แล้ว +1

    teria algo assim para o next ? estou a procura dessa funcionalidade no next

    • @joaobibiano
      @joaobibiano  ปีที่แล้ว

      Há sim, nas versões mais novas existe os layouts.

  • @fernandasc570
    @fernandasc570 2 ปีที่แล้ว +1

    👏🏼

  • @maselli012
    @maselli012 2 ปีที่แล้ว

    Excelente vídeo! No caso só fiquei com dúvida em uma parte, Outlet renderiza o children que tiver match com a rota, mas e se houver diferentes layouts e você precisar alterar o layout geral pra cada rota?

    • @joaobibiano
      @joaobibiano  2 ปีที่แล้ว

      Se tem um layout para cada rota, ou você tem rotas diferentes, ou usa a mesma rota, mas ai tem alguma configuração que te diga qual deve renderizar.

  • @SohaaTitanio
    @SohaaTitanio ปีที่แล้ว +1

    Como você usa esses recursos de desenhar como se fosse Paint na tela? É de qual programa?

    • @joaobibiano
      @joaobibiano  ปีที่แล้ว

      ScreenBrush para o mac

  • @123456paulo1
    @123456paulo1 2 ปีที่แล้ว

    otimo video, teria como usar o react router passando as variaveis de uma requisição do banco? tipo;
    const routesRender = () => {
    if(sitesDados != null){
    return sitesDados.map((task, index) => {
    if (task.menuName != null) {
    return (

    )
    }
    });
    }
    };
    return (






    {routesRender()}
    {/*
    */}





    );
    O element ele não reconhece, sabe se teria alguma forma de fazer funcionar?

    • @joaobibiano
      @joaobibiano  2 ปีที่แล้ว

      tem sim, Entra na nossa comunidade para tentarmos te ajudar por lá joaobibiano.com/discord

  • @jonatascarvalhoborges6175
    @jonatascarvalhoborges6175 2 ปีที่แล้ว

    Como faz para o prettier parar de identar as Routes "filhas"? 😅

    • @joaobibiano
      @joaobibiano  2 ปีที่แล้ว

      Manda lá no grupo do discord exatamente o que você quer dizer :)

  • @coreydevl7021
    @coreydevl7021 2 ปีที่แล้ว +1

    nao funcionou

    • @joaobibiano
      @joaobibiano  2 ปีที่แล้ว

      cara manda lá na comunidade o que não funcionou joaobibiano.com/discord

  • @nbjr3670
    @nbjr3670 2 ปีที่แล้ว +1

    👏👏👏👏👏👏👏👏