Oi, pessoal! Sobre o erro de compilação do Switch. O React Router extinguiu a funcionalidade na última versão, por isso dá erro fazer conforme o Matheus ensina nesse vídeo. No entanto, ele ensina a versão 6 nesse vídeo: th-cam.com/video/IC71Y214Xcc/w-d-xo.html A sintaxe do v6 fica assim: function App() { return (
Para quem estiver batendo cabeça como eu (20/03/2023) , as principais alterações desse vídeo em relação ao "React-Router-Dom" foram em relação ao Switch e ao Route, depois precisei ir em cada component da pasta "pages" e colocar os elementos do entre as (O que seria feito de toda forma mesmo), e um abraçando o e os (esse container é colocado em 10 minutos da aula, depois de criar o component ) . No final, minha pagina principal funcionou com a seguinte escrita: import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom"; import Home from "./components/pages/Home"; import Company from "./components/pages/Company"; import Contact from "./components/pages/Contact"; import NewProject from "./components/pages/NewProject"; import Container from "./components/layout/Container"; function App() { return (
A aula é fantástica! Estou fazendo um projeto diferente com o conhecimento desde, para ser algo original. Agradeço aos amigos pelas informações atualizadas! após dias quebrando a cabeça, decidi ler os comentários do vídeo 🙂 Valeeeeeuuuuuuuu
Tive problema com css. Resolvi mudando .min-height para .minHeight (inclusive o professor fala na aula 6 que não era pra criar classes com hifens) e tb tava coloca ${props.customClass} ao invés de ${styles[props.customClass]}. Tem que se ligar tb que não é aspas simples, mas acento grave que parecem como aspas simples, procurem por template string para saber mais. Mantive a % e foi normalmente.
Show demais! Adoro essa organização de componentes. É confusa no começo, mas depois que você entende essas "caixinhas", de onde as coisas vem e pra onde vão, fica tudo muito fluido.
Muito bom esse curso , aprendi muito com você professor , não são todas as pessoas que sebe a arte e ensinar de forma que qualquer pessoa possa entender e você é uma delas ; Obrigado pelo conhecimento, você somou na minha jornada.
Obrigado amigo! Mas mesmo assim a página retorna em branco... a div com os links não aparecem, se eu retirar a tag Routes funciona, mas se implementar ela não funciona..
@@MatheusBattisti Mateus quando vai sair um video sobre o Pilot? eu não estou acompanhando mais queria saber como anda, ele é um auxiliador ou nosso concorrente? kk
Quem estiver vendo essa aula no mês de novembro em diante, saiba que o react-router-dom mudou de versão então essa versão que está no vídeo não funcionará, para acompanhar essa aula maravilhosa sem erros retorne para o react-router-dom@5.2.0 1- desinstala a versão atual npm uninstall react-router-dom 2 instala a versão antiga Npm instala react-router-dom@5.2.0
Duas coisas galera, o meu Switch tava dando erro, aí dei um npm install react-router-dom@5.2.0 e funcionou legal. E outra coisa legal é que em vez de colocar o export default, vc pode colocar o export junto com a function tipo: export function Home(){ return() } aí na hora de importar é só importar do mesmo jeito, porém vc tem que colocar o nome do componente entre chaves, assim: import { Home } from './Components/pages/Home';
Eu pesquisei aqui, acontece que com a nova versão o Switch foi retirado Na versão 6 do React Router, o componente "Switch" foi substituído pelo componente "Routes". O componente "Switch" ainda estava presente nas versões anteriores do React Router (como na versão 5), mas na versão 6 ele foi removido. Anteriormente, o componente "Switch" era usado para renderizar apenas a primeira rota correspondente ao caminho atual. No entanto, na versão 6, você pode obter o mesmo comportamento usando o componente "Routes" com a propriedade "element". Cada rota é definida usando o componente "Route" dentro do componente "Routes", e a primeira rota correspondente ao caminho atual será renderizada. Portanto, o uso do componente "Routes" com a propriedade "element" substitui a funcionalidade do antigo componente "Switch". A estrutura de rotas com "Routes" e "Route" na versão 6 do React Router permite uma configuração mais flexível e escalável das rotas em comparação com o antigo "Switch". Portanto, você não precisa mais usar explicitamente o componente "Switch" na versão 6 do React Router. Em vez disso, use o componente "Routes" para definir suas rotas e o componente "Route" para cada rota individualmente.
Professor Matheus Battisti realmente vc tem trazido um conteúdo esclarecedor para todos nós. Aproveito para reiterar meu pedido de em breve termos um Curso de React Native de sua autoria na Udemy !
Para quem está com problemas em adicionar o CSS aos containers, tentem dar npm install nos itens que foram intalados no vídeo anterior, comigo funcionou pois eu os tinha intalado em outra pasta anteriormente!!
Qual o benefício de cria o componente Container? Na minha aplicação ele não exibe as informações da Home, Contact, Company e NewProject. Alguém já passou por isso?
Caso chegaram a fazer o arquivo de CSS do Container, alterem para Container.module.css, ao invés de Container.modules.css. Tive que fazer isso para as alterações funcionarem.
Alguém em 2024??? Geeeente como quebrei a cabeça com essa atualização do react-dom para a V6. Já estou a 2 dias batendo a cabeça nisso. Eu não consegui resolver da maneira que tem nos tutorias da galera, eu fazia igual e mesmo assim dava erro, não renderizava nada. Eu resolvi o problema com um framework envolvendo todo o código, ficou assim: 1 import {Route, Routes} from 'react-route-dom importei todos os componentes, 'pastas', que criei e em seguida fiz os códigos:
... ... fiz exatamente assim galera e deu certo. no console estava dando problemas com o mesmo fazendo igualzinho do professor em outro vídeo mais recente que ele explica. Espero ter ajudado! um abraço!
Olá Matheus, eu fiquei com uma dúvida. O meu footer só desce quando eu uso 'px', se eu usar '%' ele não vai, já tentei trocar pra inline block e colocar o height do body 100% e não foi também usando porcentagem.
O meu funcionou trocando o hífen por camelCase na classe do CSS: .minHeight { min-height: 75%; } Mas não esquece de alterar a props lá no Container para customClass="minHeight"
Eu achava que react era pra facilitar, mas pelo que eu tô vendo só facilita a vida do usuário final pq tou achando muito mais difícil que sem usar react
Observação a muitos, na nova versão do react-router-dom mudou o Switch para Routes, e a TAG Route precisa do atributo element, que é o que será renderização caso seja a rota solicitada
Visto! tive problema com o css e consegui resolver aplicando a classe ''min-height'' no componente "Container'' e o module.css ficou assim: .Container { width: 1200px; margin: 0 auto; display: flex; flex-direction: column; justify-content: space-between; flex-grow: 1; } .min-height { min-height: 75vh; }
Pra quem tá tendo dificuldades com o Route (que era pra ser o "Switch" desse vídeo); Você deve importar o componente dentro da tag "element" como se fosse uma prop. Eis um exemplo.
// lembra desse "exact" que a gente coloca só na Home // O resto dos componentes segue esse padrão. Basta trocar os nomes e lembrar de importar eles certinho ...
No meu caso o roteamento só funcionou corretamente quando eu declaro o atributo element dentro do Route, quando tentava colocar o entre os Route me retornava erro component children exemplo: Então lembrei que nas aulas anteriores foram declaradas como element={}. ficando desse forma aqui:
É importante também existir o espaço quando declarar o className no Container: Senão o código é entendido como uma concatenação e o min-height não funciona.
Se estiver dando erro, tenta com esse codigo::: import { BrowserRouter as router, Switch, Route, Routes, useRoutes, Link, } from "react-router-dom"; import { BrowserRouter} from 'react-router-dom'; import Home from "./components/pages/Home"; import Contact from "./components/pages/Contact"; import Company from "./components/pages/Company"; import NewProject from "./components/pages/NewProject"; function App() { return (
Eu pesquisei aqui, acontece que com a nova versão o Switch foi retirado Na versão 6 do React Router, o componente "Switch" foi substituído pelo componente "Routes". O componente "Switch" ainda estava presente nas versões anteriores do React Router (como na versão 5), mas na versão 6 ele foi removido. Anteriormente, o componente "Switch" era usado para renderizar apenas a primeira rota correspondente ao caminho atual. No entanto, na versão 6, você pode obter o mesmo comportamento usando o componente "Routes" com a propriedade "element". Cada rota é definida usando o componente "Route" dentro do componente "Routes", e a primeira rota correspondente ao caminho atual será renderizada. Portanto, o uso do componente "Routes" com a propriedade "element" substitui a funcionalidade do antigo componente "Switch". A estrutura de rotas com "Routes" e "Route" na versão 6 do React Router permite uma configuração mais flexível e escalável das rotas em comparação com o antigo "Switch". Portanto, você não precisa mais usar explicitamente o componente "Switch" na versão 6 do React Router. Em vez disso, use o componente "Routes" para definir suas rotas e o componente "Route" para cada rota individualmente.
A explicação do styles.container e styles[props.customClass] no minuto 12:56 ficou confusa. A forma de colocar {`${style.container} ${styles[props.customClass]`} é dessa forma pois estamos colocando 2 classes no className. Tentar colocar 2 ou mais classes no className de outra forma não daria certo. Exemplo: você consegue colocar className={styles.container} e funcionar, mas não conseguiria fazer por exemplo algo como: className={styles.container styles[props.customClass]} e funcionar também.
Ola Matheus, tudo bem? O Componente Container.js esta deixando a pagina em branco quando eu envolvo o route o antigo switch com . estou tentando acompanhar o video para aprender e não consegui achar a solução. pode me auxiliar.
Matheus, poderia regravar essa aula usando o Routes sem o uso de Switch? Estou tendo muita dificuldade aqui e, não consigo renderizar os componentes de maneira nenhuma!
@@hawks2271 Se eu coloco container com "C" maiúsculo diz que o container não está definido, se eu coloco com "c" minúsculo não dá nenhum erro mas tbm não renderiza nada.
@@kodakhighlights8885 import {BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom' import Home from './components/pages/Home' import Company from './components/pages/Company' import Contact from './components/pages/Contact' import NewProject from './components/pages/NewProject' import Container from './components/layout/Container' function App() { return (
O Container não funciona na nova sintaxe do Switch (Routes). Retorna um erro dizendo que dentro de Routes só pode ter rotas (Route). Estou parada nessa parte sem saber como continuar hahaha
Realizando o curso na data de hoje, percebi que não é usado mais o Switch e sim o Routes. Segui os passos do pessoal nos comentários, mas mesmo assim não é retornado para mim na tela a mensagem de qual pagina estou, exemplo: Home, ou Contato, o link funciona, porem o com a mensagem não aparece, fica vazio, e no console não me retorna nenhum erro. Vi que alguns passaram por esses mesmo problemas e ainda não foram resolvidos, alguém poderia ajudar?
O router vai instalar a versão 6, que não usa mais o Switch. Para resolver o problema, é ir no terminal, encerrar o processo e digitar: npm install --save react-router-dom@5.2.0
O meu resolveu quando eu tirei o footer de dentro do container : import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom" import Home from "./components/pages/Home" import Contact from "./components/pages/Contact" import Company from "./components/pages/Company" import NewProject from "./components/pages/NewProject" import Footer from "./components/layout/Footer" import Container from "./components/layout/Container" function App() { return (
Opa, tbm tive dificuldade com esse vídeo mas deu tudo certo! Vou deixar aqui o meu código: import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom' import Home from './components/pages/Home'; import Company from './components/pages/Company'; import Contact from './components/pages/Contact'; import NewProject from './components/pages/NewProject'; function App() { return (
Geralmente quando isso acontece, é por que você não está chamando ele ou de fato, definindo em alguma linha. Se ele já tiver importado corretamente, veja se ele está sendo de fato definido (chamado) em algum momento dentro do componente.
AQUI FICA O AVISO! Dps de quebrar a cabeça aqui, percebi q o Switch foi desabilitado da nova versão do react e no lugar tem o Routes e tem q fazer mais algumas alterações no documento
Olá Prof, usando as unidades de medidas % no atributo min-height, o footer não está sendo empurrado pra baixo, mesmo usando px ou vh também não tenho sucesso, tentei importar diretamente o Container.module.css e tirando os atributos style da className ainda permaneço com dificuldade para empurrar o footer pra baixo, deixando uma anomalia. Como posso resolver isso?
Estou com um problema. As páginas não trocam ao clicar nos links. Só se atualizar a página. Ex.: Se clicar em Contato, ele muda o path mas, não troca de componente. Mas, se atualizar a página ele troca para contato. E djabo de problema eh esse?
Quando tento fazer isso: className={'${style.container} ${style[props.customClass]}'} está na parte 13:01. O código reconhece como uma string e não como um elemento JavaScript. O que pode ser isso?
Quem está com problema no Switch, vou compartilhar o código: import {BrowserRouter as Router, Routes, Route} from 'react-router-dom' import Home from './components/pages/Home' import Empresa from './components/pages/Empresa' import Contato from './components/pages/Contato' import NovoProjeto from './components/pages/NovoProjeto' function App() { return (
Resolvi o problema da descontinuação do Switch com o Routes, todavia a página fica em branco mesmo colocando o Container fora do "Switch"(Routes).... bate até a tristeza acompanhar as aulas e empacar assim kkkk
@@andrebuitoni9686 sim sim meu amigo, hoje em dia uso o hashrouter, da uma olhada na documentação ou pede ao GPT para te dizer como seria as rotas utilizando hashrouter
galera alguem pode me ajudar? por algum motivo nao esta pegando as configuraçoes do css do container. nao importa o que eu escreva nada muda no browser import styles from './Container.modules.css' function Container(props) { return {props.children} } export default Container eu acredito que o erro seja no className={`${styles.container}`} Help
@@Bazinga-Eng Cara eu te amo, eu já estava muito puto porque eu tinha até visto que tinha esse S mas nem me toquei que era isso o erro, fiquei dois dias tentando descobrir isso, sou muito burro kkkkkkk
Não sei se solucionou, mas eu só consegui quando eu mudei de para . Porém, mesmo aplicando a customclass, não consegui ainda fazer o CSS funcionar dentro da aplicação.
Olá, sou iniciante. estou tendo problemas pra definir as rotas, fica dando esse erro no Switch "Attempted import error: 'Switch' is not exported from 'react-router-dom' (imported as 'Switch')." Alguém pode me ajudar?
Nossa fiquei o dia todo tentando entender o que eu tava fazendo errado no , até que depois do trabalho decidi fazer desde o inicio e descobri que foi no comando de instalação: npm install json-server react-icons react-router-dom uuid Que eu não havia entrado na pasta /costs, antes de executar, ai tudo deu errado, mas refazendo bombou e o foco voltou novamente!
Cara estava com o mesmo problema (apesar de que to respondendo dps de 1mês estou relatando como resolvi pra caso outra pessoa veja saiba como resolver), primeira coisa que você tem que fazer é mudar o switch pro routes, tem diversos comentários e o professor também fez um vídeo, mesmo com esse vídeo eu ainda estava com problema do meu CSS estar sendo aplicado. A mudança que eu fiz foi: Quando eu importei o css não utilizei ele como um componente importado, apenas digitei o caminho do css import './Container.modules.css'; e hora de retornar o componente Container ao invés de fazer `${styles.container} ${ styles [props.customClass] }` eu fiz sem o style. ficou assim dai: return(
Boa noite Matheus, ansisoso pelo projeto! Uma duvida, teria como importar todas as pages de uma vez? Estilo import {Home, Contact, etc... } from pages Tentei aqui mas deu erro, digamos que tivesse umas 20 paginas seria bem trabalhoso digitar todos os imports hehe abraço!
Compilado com problemas:X ERRO em ./src/componentes/layout/Contêiner.js 4:0-42 Módulo não encontrado: Erro: Não é possível resolver 'Container.module.css' em 'C:\User\user\Desktop\Curso\projeto\src\components\layout' Você quis dizer './Container.module.css'? As solicitações que devem ser resolvidas no diretório atual precisam começar com './'. As solicitações que começam com um nome são tratadas como solicitações de módulo e resolver dentro de diretórios de módulos (node_modules, C:\User\user\Desktop\Curso\projeto ode_modules). Se alterar o código-fonte não é uma opção, há também uma opção de resolução chamada 'preferRelative' que tenta resolver esse tipo de solicitações no diretório atual também. dando esse erro no meu.
Colarei abaixo o código fonte desta aula Código do "Container.js" import styles from './Container.module.css' function Container(props){ return( {props.children}
) } export default Container Código do apps.js import {BrowserRouter as Router,Routes,Route, Link} from 'react-router-dom' import Home from './components/pages/Home' import Contact from './components/pages/Contact' import Company from './components/pages/Company' import NewProject from './components/pages/NewProject' import Container from './components/pages/layout/Container' function App() { return (
Home Contato Empresa Novo Projeto
Footer
); } export default App; Código fonte doContainer.module.css .container{ width: 1200px; display: flex; justify-content: space-between; margin: 0 auto; flex-wrap: wrap; } .minHeight{ min-height: 75%; min-height: 75vh; } .start{ justify-content: flex-start; } .column{ } Assista novamente, assita uma sem fazer nada , apenas prestando atenção e outra fazendo os códigos
Pra quem ta usando o ao invés de Switch, o que o professor falou fica fora do
obrigado amigo
Voce me salvou. Estava intrigado com isso...
Em vez de usar link eu usei o no nav kk
Boa, ja passei o dia tentando descobrir esse Routes, ja que o Switch não funciona mais. Se eu passasse o resto do dia encucado com isso eu me matava
Obrigado amigo, você é um amigo....
Caramba... além do curso ser excelente os comentários da galera ajudam demais quando temos algumas dificuldades. Obrigado a todos!!!
Sim cara, realmente, a comunidade está ajudando muito.
melhor que faculdade, melhor que muitos cursos pagos, esse canal ta de parabensss
Quem estiver usando o Routes ao invés do Switch é necessário colocar o component Container para fora do Routes
Eu já estava esquentando a cabeça com isso kkkk Obrigado pela dica!
@@carlosamorim94 🤝
Vc é o cara!
Muito obrigado mano
@Emanuel "Ruthusky" Angelo Ao invés de fazer:
Agora como estás a usar , ao invés de , por causa da atualização do react-router-dom, tens que fazer assim:
pra quem tiver com problema no hora do customClass é só mudar o "min-height: 75%;" pra "min-height: 75vh;"
Muito obrigado
colocando o customClass na tag do container em App.js, todas as vzs que eu usar a tag ela já estará com o customClass?
obrigado amigo, você é um amigo 🤝
@@charlesconde975 só vai estar se chamar na tag pelo props
Muito obrigado, funcionou agora
galera ajuda muito nos comentários! Qualquer dúvida que surge, é só rolar a página que alguém já perguntou e outro já respondeu! muito bom mesmo
Oi, pessoal! Sobre o erro de compilação do Switch. O React Router extinguiu a funcionalidade na última versão, por isso dá erro fazer conforme o Matheus ensina nesse vídeo. No entanto, ele ensina a versão 6 nesse vídeo: th-cam.com/video/IC71Y214Xcc/w-d-xo.html
A sintaxe do v6 fica assim:
function App() {
return (
Home
Empresa
Contato
Novo Projeto
Footer
);
}
Joguei o código lá e não rodou tem alguma dica?
Na atual versão a v6 o customClass q ele adicionou no componente Container ñ está funcionando, isso tmb é culpa da atualização?
@@leojaimeiesbikcosta424 tbm não funcionou aqui.
@@freitassousa tentem ver a importação. Aqui deu certo como:
import { Routes, Route, BrowserRouter, Link } from 'react-router-dom'
@@leandroszoke consegui resolver. Tinha colocado link duas vezes na criação das rotas kkkkkkk
Para quem estiver batendo cabeça como eu (20/03/2023) , as principais alterações desse vídeo em relação ao "React-Router-Dom" foram em relação ao Switch e ao Route, depois precisei ir em cada component da pasta "pages" e colocar os elementos do entre as (O que seria feito de toda forma mesmo), e um abraçando o e os (esse container é colocado em 10 minutos da aula, depois de criar o component ) .
No final, minha pagina principal funcionou com a seguinte escrita:
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import Home from "./components/pages/Home";
import Company from "./components/pages/Company";
import Contact from "./components/pages/Contact";
import NewProject from "./components/pages/NewProject";
import Container from "./components/layout/Container";
function App() {
return (
Home
Contato
Empresa
Novo Projeto
}/>
}/>
}/>
}/>
Rodapé
);
}
export default App;
cara eu preciso mt da sua ajuda, ja revisei varias vezes e nao roda de forma nenhuma
cara, consegui resolver fiz alguns ajustes aqui, deus te abençoe
Me ajudou muito obrigado!
mano mto obg
A aula é fantástica! Estou fazendo um projeto diferente com o conhecimento desde, para ser algo original. Agradeço aos amigos pelas informações atualizadas! após dias quebrando a cabeça, decidi ler os comentários do vídeo 🙂 Valeeeeeuuuuuuuu
Tive problema com css. Resolvi mudando .min-height para .minHeight (inclusive o professor fala na aula 6 que não era pra criar classes com hifens) e tb tava coloca ${props.customClass} ao invés de ${styles[props.customClass]}. Tem que se ligar tb que não é aspas simples, mas acento grave que parecem como aspas simples, procurem por template string para saber mais. Mantive a % e foi normalmente.
Resolveu meu problema
Nice, resolveu meu problema dms
Show demais! Adoro essa organização de componentes. É confusa no começo, mas depois que você entende essas "caixinhas", de onde as coisas vem e pra onde vão, fica tudo muito fluido.
Muito bom esse curso , aprendi muito com você professor , não são todas as pessoas que sebe a arte e ensinar de forma que qualquer pessoa possa entender e você é uma delas ; Obrigado pelo conhecimento, você somou na minha jornada.
valeu Alison, espero poder te ajudar mais! =)
pode me ajudar mn?
Para quem estiver com problemas com o switch, pode mudar o código para o seguinte:
Home
Contato
Empresa
Novo Projeto
Footer
mano eu te amo
Obrigado amigo!
Mas mesmo assim a página retorna em branco... a div com os links não aparecem, se eu retirar a tag Routes funciona, mas se implementar ela não funciona..
Mano eu te amo agradeço muiitoo, mas para eu saber tudo isso que mudou é so loendo aquele site do react-router-dom?
Salvou demais brother
ainda salvando vidas em 2023, vlw man
Muito bom professor, finalmente React JS de forma simples e direta!
Aguardamos um curso de React Native, pode ser na plataforma Udemy mesmo.
opa Jason, obrigado! É a meta para ano que vem, este ano não posso te prometer hehe
@@MatheusBattisti Mateus quando vai sair um video sobre o Pilot? eu não estou acompanhando mais queria saber como anda, ele é um auxiliador ou nosso concorrente? kk
Quem estiver vendo essa aula no mês de novembro em diante, saiba que o react-router-dom mudou de versão então essa versão que está no vídeo não funcionará, para acompanhar essa aula maravilhosa sem erros retorne para o react-router-dom@5.2.0
1- desinstala a versão atual
npm uninstall react-router-dom
2 instala a versão antiga
Npm instala react-router-dom@5.2.0
@reach/router tambem serve
Dudu Hilario, obrigado.
Já estava bugando aqui com isso, resolver na hora. Valeuuuu
Valeu, aqui comigo deu certo
OBRIGADA
Ai ajeitou hein.. tava entrando em desespero aqui pq nao tava dando certo.. obrigado pela dica
para qm esta com problemas com route fica assim:
Show de bola, valeu pela informação, pois eu já estava ficando chateado por não estar conseguindo fazer, mas agora eu consegui. Obrigado!
Duas coisas galera, o meu Switch tava dando erro, aí dei um npm install react-router-dom@5.2.0 e funcionou legal.
E outra coisa legal é que em vez de colocar o export default, vc pode colocar o export junto com a function
tipo:
export function Home(){
return()
}
aí na hora de importar é só importar do mesmo jeito, porém vc tem que colocar o nome do componente entre chaves, assim:
import { Home } from './Components/pages/Home';
precisei fazer desta forma a instalaçao do router-dom
Eu pesquisei aqui, acontece que com a nova versão o Switch foi retirado
Na versão 6 do React Router, o componente "Switch" foi substituído pelo componente "Routes". O componente "Switch" ainda estava presente nas versões anteriores do React Router (como na versão 5), mas na versão 6 ele foi removido.
Anteriormente, o componente "Switch" era usado para renderizar apenas a primeira rota correspondente ao caminho atual. No entanto, na versão 6, você pode obter o mesmo comportamento usando o componente "Routes" com a propriedade "element".
Cada rota é definida usando o componente "Route" dentro do componente "Routes", e a primeira rota correspondente ao caminho atual será renderizada. Portanto, o uso do componente "Routes" com a propriedade "element" substitui a funcionalidade do antigo componente "Switch".
A estrutura de rotas com "Routes" e "Route" na versão 6 do React Router permite uma configuração mais flexível e escalável das rotas em comparação com o antigo "Switch".
Portanto, você não precisa mais usar explicitamente o componente "Switch" na versão 6 do React Router. Em vez disso, use o componente "Routes" para definir suas rotas e o componente "Route" para cada rota individualmente.
Professor Matheus Battisti realmente vc tem trazido um conteúdo esclarecedor para todos nós.
Aproveito para reiterar meu pedido de em breve termos um Curso de React Native de sua autoria na Udemy !
Suas aulas são sensacionais! Esclarecedoras para os iniciantes. Muito Obrigada!
Aulas sensacionais, nunca aprendi tanto..
Utilizei o min-height com a unidade vh e aparentemente funcionou.
min-height: 75vh
Boa, eu tinha colocado em pixel pois não havia conseguido com % rsrsrs. Obrigado
Salvou minha paciencia!!!!
Precisa tomar cuidado com a classe app, ele tira no início do vídeo. Isso influência no min-height do container
você salvouy minha vida XD obrigado
Matheus Battisti
Obrigado, aulas top d+
Vou me inscrever no udemy na tua aula.
valeu Cleber =))
1 - Switch agora é Routes
2 - Attribute element para setar o component:
Para quem está com problemas em adicionar o CSS aos containers, tentem dar npm install nos itens que foram intalados no vídeo anterior, comigo funcionou pois eu os tinha intalado em outra pasta anteriormente!!
não deu certo
Parabéns pelo conteúdo de qualidade.
obrigado Anderson!
Qual o benefício de cria o componente Container? Na minha aplicação ele não exibe as informações da Home, Contact, Company e NewProject. Alguém já passou por isso?
Excelente ! Muito Bem Explicado ! ! Parabéns pelos vídeos ! ! !
Pra quem nao ta conseguindo com switch porque o react atualizou
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'
Deus abençoe 😂🙏
Caso chegaram a fazer o arquivo de CSS do Container, alterem para Container.module.css, ao invés de Container.modules.css. Tive que fazer isso para as alterações funcionarem.
Cara, obrigado, tava quebrando a cabeça do porque o css não funcionar e era isso kkkk
Muito obrigado!! Real kkk
Aula 18 muitoooo boa
Galera, nova sintaxe
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
Valeu obrigado, estava batendo a cabeça porque não renderizava na tela
usei assim :
Alguém em 2024???
Geeeente como quebrei a cabeça com essa atualização do react-dom para a V6.
Já estou a 2 dias batendo a cabeça nisso.
Eu não consegui resolver da maneira que tem nos tutorias da galera, eu fazia igual e mesmo assim dava erro, não renderizava nada.
Eu resolvi o problema com um framework envolvendo todo o código, ficou assim:
1 import {Route, Routes} from 'react-route-dom
importei todos os componentes, 'pastas', que criei e em seguida fiz os códigos:
...
...
fiz exatamente assim galera e deu certo.
no console estava dando problemas com o mesmo fazendo igualzinho do professor em outro vídeo mais recente que ele explica.
Espero ter ajudado!
um abraço!
Boa, Matheus. Não consegui desenrolar essa aula, mano... Tem algum vídeo atualizado dessa parte do projeto?
Olá Matheus, eu fiquei com uma dúvida.
O meu footer só desce quando eu uso 'px', se eu usar '%' ele não vai, já tentei trocar pra inline block e colocar o height do body 100% e não foi também usando porcentagem.
Estou a mesma dúvida
O meu funcionou trocando o hífen por camelCase na classe do CSS:
.minHeight {
min-height: 75%;
}
Mas não esquece de alterar a props lá no Container para customClass="minHeight"
Uma duvida, qual o beneficio de criar o Container component?
Professor excelente!
Estou quse me considerando um dev front-end hahah
Eu achava que react era pra facilitar, mas pelo que eu tô vendo só facilita a vida do usuário final pq tou achando muito mais difícil que sem usar react
Observação a muitos, na nova versão do react-router-dom mudou o Switch para Routes, e a TAG Route precisa do atributo element, que é o que será renderização caso seja a rota solicitada
Fiz um vídeo sobre isso, tá na playlist 😀
@@mateusgameplaygames5782 conseguiu resolver? estou com o mesmo problema
olha o vacilo, assisti 19 vídeos e não dei like. Vou ter que abrir todos e fazer! O curso é bom e não da pra deixar de fazer o mínimo
Visto!
tive problema com o css e consegui resolver aplicando a classe ''min-height'' no componente "Container'' e o module.css ficou assim:
.Container {
width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: space-between;
flex-grow: 1;
}
.min-height {
min-height: 75vh;
}
Pra quem tá tendo dificuldades com o Route (que era pra ser o "Switch" desse vídeo);
Você deve importar o componente dentro da tag "element" como se fosse uma prop. Eis um exemplo.
// lembra desse "exact" que a gente coloca só na Home
// O resto dos componentes segue esse padrão. Basta trocar os nomes e lembrar de importar eles certinho
...
No meu caso o roteamento só funcionou corretamente quando eu declaro o atributo element dentro do Route, quando tentava colocar o entre os Route me retornava erro component children exemplo: Então lembrei que nas aulas anteriores foram declaradas como element={}. ficando desse forma aqui:
É importante também existir o espaço quando declarar o className no Container:
Senão o código é entendido como uma concatenação e o min-height não funciona.
Se estiver dando erro, tenta com esse codigo:::
import {
BrowserRouter as router,
Switch,
Route,
Routes,
useRoutes,
Link,
} from "react-router-dom";
import { BrowserRouter} from 'react-router-dom';
import Home from "./components/pages/Home";
import Contact from "./components/pages/Contact";
import Company from "./components/pages/Company";
import NewProject from "./components/pages/NewProject";
function App() {
return (
Home
Contato
);
}
export default App;
Deu certo aqui! Obrigado!!
Eu pesquisei aqui, acontece que com a nova versão o Switch foi retirado
Na versão 6 do React Router, o componente "Switch" foi substituído pelo componente "Routes". O componente "Switch" ainda estava presente nas versões anteriores do React Router (como na versão 5), mas na versão 6 ele foi removido.
Anteriormente, o componente "Switch" era usado para renderizar apenas a primeira rota correspondente ao caminho atual. No entanto, na versão 6, você pode obter o mesmo comportamento usando o componente "Routes" com a propriedade "element".
Cada rota é definida usando o componente "Route" dentro do componente "Routes", e a primeira rota correspondente ao caminho atual será renderizada. Portanto, o uso do componente "Routes" com a propriedade "element" substitui a funcionalidade do antigo componente "Switch".
A estrutura de rotas com "Routes" e "Route" na versão 6 do React Router permite uma configuração mais flexível e escalável das rotas em comparação com o antigo "Switch".
Portanto, você não precisa mais usar explicitamente o componente "Switch" na versão 6 do React Router. Em vez disso, use o componente "Routes" para definir suas rotas e o componente "Route" para cada rota individualmente.
Muito legal !!! Professor como funciona a responsabilidade no react ? É automatica ? Funciona em celular, etc ?
Responsibidade*
@@hayderberyonayckel7121 caralho tu foi corrigir e ainda corrigiu errado KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
responsividade man KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK o hayderber tbm errou
@@guilhermeg4190 kkkkk
@@shaolin-aka-shaolas kkkkkk
A explicação do styles.container e styles[props.customClass] no minuto 12:56 ficou confusa.
A forma de colocar {`${style.container} ${styles[props.customClass]`} é dessa forma pois estamos colocando 2 classes no className. Tentar colocar 2 ou mais classes no className de outra forma não daria certo.
Exemplo: você consegue colocar className={styles.container} e funcionar, mas não conseguiria fazer por exemplo algo como:
className={styles.container styles[props.customClass]} e funcionar também.
Prof é uma inteligencia artificial trabalha a todo vapor kk
kkkkk
Ola. os compomentes não estão renderizando, quando rodo não aparece a pagina, fica tudo branco, ja revisei tudo uma 10 vezes.
aqui também, perdi a manhã toda já, complicado
@@andrebuitoni9686 no meu caso era problema na no CSS, eu refis tudo e deu certo.
Ola Matheus, tudo bem? O Componente Container.js esta deixando a pagina em branco quando eu envolvo o route o antigo switch com . estou tentando acompanhar o video para aprender e não consegui achar a solução. pode me auxiliar.
Como esse pacote foi atualizado o componente tem que ficar por fora do Routes
Valeu a dica, funcionou direitinho
Matheus, poderia regravar essa aula usando o Routes sem o uso de Switch? Estou tendo muita dificuldade aqui e, não consigo renderizar os componentes de maneira nenhuma!
tenta usar assim
TROCA O Switch QUE ESTA NO IMPORT POR Routes E SEGUE NORMAL
function App() {
return (
Home
Empresa
Contato
Novo Projeto
Footer
);
}
@@viniciusmarques7303 Opa! consegui resolver assim:
return (
Home
Contato
Empresa
Novo Projeto
Rodapé
);
@@walterbranco8798 me ajudou demais, thanks
@@hawks2271 Se eu coloco container com "C" maiúsculo diz que o container não está definido, se eu coloco com "c" minúsculo não dá nenhum erro mas tbm não renderiza nada.
Alguém pode me ajudar meu css não está estilizando minha página
a minha também não, a classe aparece como undefined quando inspeciono a pagina no devtools
minha pagina só atualiza os links das paginas se eu apertar F5. O que pode estar acontecendo?
Switch não funciona :/
WARNING in src\App.js
Line 1:35: 'Switch' is defined but never used no-unused-vars
Embora o VS Code não apresente um erro, a minha página fica toda em branco, isso acontece com vocês também? Como que resolve isso?
up
cada vídeo que assisto me sinto mais próximo do emprego hahahah
export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' (possible exports:.... Tô com esse erro.
outra forma de resolver o problema do é usando uma versão anterior a 6 do react-router-dom
iae, não to conseguindo ainda! ajuda aqui
@@kodakhighlights8885 Ola tudo bem conseguiu resolver seu problema
@@kodakhighlights8885 import {BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom'
import Home from './components/pages/Home'
import Company from './components/pages/Company'
import Contact from './components/pages/Contact'
import NewProject from './components/pages/NewProject'
import Container from './components/layout/Container'
function App() {
return (
Home
Empresa
Contato
Novo Projeto
Footer
);
}
export default App;
parece queo meu nav veio de fabrica na horizonta e não na vertical
O Container não funciona na nova sintaxe do Switch (Routes). Retorna um erro dizendo que dentro de Routes só pode ter rotas (Route). Estou parada nessa parte sem saber como continuar hahaha
Ve a aula ajustando o projeto do Route 6. Acho que vai resolver teus problema.
O container deve encapsular o Routes dessa vez:
@@carlosamorim94 Valeu, Carlos!
Tenho uma dúvida, tentei passar mais de uma classe no customClass e ele não aceita, o que posso fazer?
meu não deu certo tava indo igual até importa as pages home, company.... ai some tudo que aparecia antes no navegador.
Realizando o curso na data de hoje, percebi que não é usado mais o Switch e sim o Routes.
Segui os passos do pessoal nos comentários, mas mesmo assim não é retornado para mim na tela a mensagem de qual pagina estou, exemplo: Home, ou Contato, o link funciona, porem o com a mensagem não aparece, fica vazio, e no console não me retorna nenhum erro.
Vi que alguns passaram por esses mesmo problemas e ainda não foram resolvidos, alguém poderia ajudar?
troca o Switch por Routes no import e faz assim:
Home
Contato
Empresa
Novo Projeto
Footer
conseguiu resolver?
@@Bazinga-Eng não
@@lelis.designer Obrigado, o meu voltou a funcionar!
@@lelis.designer valeu meu nobre
Olá não consigo centralizar o Home na tela, alguem pode me ajudar?
O router vai instalar a versão 6, que não usa mais o Switch. Para resolver o problema, é ir no terminal, encerrar o processo e digitar: npm install --save react-router-dom@5.2.0
oi Veronica, tem um vídeo no canal explicando o update do projeto para a v6
@@MatheusBattisti Gratidão! Ajustei e deu tudo certo!
Veronica Tooop tava empacado a hrs batendo a cabeça vc me salvou :) Melhor solução
Estava com esse problema, valeu!
O meu footer não esta indo para baixo, alguém sabe como resolver ? estou usando o mesmo código do Matheus
Verifica a versão, se o router estiver na versão 6 a galerinha postou nos comentários de como resolver
O meu resolveu quando eu tirei o footer de dentro do container :
import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom"
import Home from "./components/pages/Home"
import Contact from "./components/pages/Contact"
import Company from "./components/pages/Company"
import NewProject from "./components/pages/NewProject"
import Footer from "./components/layout/Footer"
import Container from "./components/layout/Container"
function App() {
return (
Home
Contato
Empresa
Novo Projeto
);
}
export default App;
sempre quando vou ultilizar o '${}' não funciona por ex quando ele faz {'${styles.container}'} o meu entra como string e nao como js
oi Bianca, é que não é ' e sim ` =)
Por algum motivo meu min-height só ta funcionando se for usando 75vh e não 75%, alguém sabe porque isso acontece?
Antes de funcionava com %
Muito boas as suas aulas mais por favor faz um novo projetinho com React V6 por favor ia ajudar muito
Opa, tbm tive dificuldade com esse vídeo mas deu tudo certo!
Vou deixar aqui o meu código:
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'
import Home from './components/pages/Home';
import Company from './components/pages/Company';
import Contact from './components/pages/Contact';
import NewProject from './components/pages/NewProject';
function App() {
return (
Home
Empresa
Contato
Novo Projeto
);
}
export default App;
muito bom
valeu!
Alguém pode me ajudar? Estou tendo problema com o styles. Meu console fala que o styles não está sendo definido.
Geralmente quando isso acontece, é por que você não está chamando ele ou de fato, definindo em alguma linha.
Se ele já tiver importado corretamente, veja se ele está sendo de fato definido (chamado) em algum momento dentro do componente.
to com o mesmo problema, conseguiu resolver? se sim me fala oq vc teve que fazer PF
AQUI FICA O AVISO! Dps de quebrar a cabeça aqui, percebi q o Switch foi desabilitado da nova versão do react e no lugar tem o Routes e tem q fazer mais algumas alterações no documento
assim ele funciona de boa. Boa sorte nos estudos
GOD DE MAIS
Eu tava penando aqui tentando saber porque diabos n tava funcionando kkk
vlw mano, tava tentando aqui, agora deu certo
Valeu, quebrei bastante a cabeça aqui.
Quando faço envolvendo com o Container, na minha aplicação ele não exibe as informações da Home, Contact, Company e NewProject
@@dellond ola amio. o meu esta assim. nao aparece nada no naveador. como vc resolveu?
pessoal por gentileza, alguém tem uma sólução definitiva pra o css funcionar por favor? o meu não está funcionamdo min-height.
o meu também esta assim
Não pode utilizar '-' nas classes, tem que usar camelCase ou snake_case
Olá Prof, usando as unidades de medidas % no atributo min-height, o footer não está sendo empurrado pra baixo, mesmo usando px ou vh também não tenho sucesso, tentei importar diretamente o Container.module.css e tirando os atributos style da className ainda permaneço com dificuldade para empurrar o footer pra baixo, deixando uma anomalia. Como posso resolver isso?
Resolvido: a tag Footer deve ficar de baixo do como prevê a semantica html, com isso a css aplica o min-height corretamente.
Fui tentar fazer e deu uns erros que não to conseguindo resolver, principalmente em relação ao Switch que não entendi nada... Alguém pode me ajudar?
boa tarde ,o meu esta falando q o switch não foi encontrado em 'react-router-dom' n sei o que fazer
alguem me ajuda porfavor
atualizou, retira o switch para Routes
Estou com um problema. As páginas não trocam ao clicar nos links. Só se atualizar a página. Ex.: Se clicar em Contato, ele muda o path mas, não troca de componente. Mas, se atualizar a página ele troca para contato. E djabo de problema eh esse?
conseguiu resolver? estou com o mesmo problema
Quando tento fazer isso: className={'${style.container} ${style[props.customClass]}'} está na parte 13:01. O código reconhece como uma string e não como um elemento JavaScript. O que pode ser isso?
Use assim: {`${style.container} ${style[props.customClass]}`} não são aspas.
@@marcosmaiworm8028 Vlw bro, descobri mais na frente do curso que são crases e não aspas kkk obrigado!
O que fazer quando as páginas do route não atualizam sozinhas (exigindo o f5)?
estou com o mesmo problema, como vc conseguiu resolver?
Galera o meu está ficando com a tela branca
Quem está com problema no Switch, vou compartilhar o código:
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom'
import Home from './components/pages/Home'
import Empresa from './components/pages/Empresa'
import Contato from './components/pages/Contato'
import NovoProjeto from './components/pages/NovoProjeto'
function App() {
return (
Home
Empresa
Contato
Novo Projeto
Footer
);
}
export default App;
Resolvi o problema da descontinuação do Switch com o Routes, todavia a página fica em branco mesmo colocando o Container fora do "Switch"(Routes).... bate até a tristeza acompanhar as aulas e empacar assim kkkk
Mesma coisa aqui. Estou quase desistindo. Você conseguiu resolver o problema da página branca?
@@andrebuitoni9686 sim sim meu amigo, hoje em dia uso o hashrouter, da uma olhada na documentação ou pede ao GPT para te dizer como seria as rotas utilizando hashrouter
galera alguem pode me ajudar?
por algum motivo nao esta pegando as configuraçoes do css do container. nao importa o que eu escreva nada muda no browser
import styles from './Container.modules.css'
function Container(props) {
return {props.children}
}
export default Container
eu acredito que o erro seja no className={`${styles.container}`}
Help
'./Container.modules.css'
tira o "S" da palavra modules e vê se resolve -> './Container.module.css'
@@Bazinga-Eng não deu nem pra acreditar que algo tao simples resolveu o problema. valeu cara, agora posso continuar o curso.
@@Bazinga-Eng Cara eu te amo, eu já estava muito puto porque eu tinha até visto que tinha esse S mas nem me toquei que era isso o erro, fiquei dois dias tentando descobrir isso, sou muito burro kkkkkkk
@@Bazinga-Eng Tu e Brabo vlw tava com o mesmo erro
Eu nao to conseguindo passar a classe custum. ela nao chama de jeito algum, fica assim: Container_container__0k4fb undefined
Não sei se solucionou, mas eu só consegui quando eu mudei de para . Porém, mesmo aplicando a customclass, não consegui ainda fazer o CSS funcionar dentro da aplicação.
Olá, sou iniciante. estou tendo problemas pra definir as rotas, fica dando esse erro no Switch "Attempted import error: 'Switch' is not exported from 'react-router-dom' (imported as 'Switch')." Alguém pode me ajudar?
O switch não é mais utilizado, olha o vídeo número 50 da playlist "Curso de React" aqui do canal, é o penúltimo vídeo
Nossa fiquei o dia todo tentando entender o que eu tava fazendo errado no , até que depois do trabalho decidi fazer desde o inicio e descobri que foi no comando de instalação:
npm install json-server react-icons react-router-dom uuid
Que eu não havia entrado na pasta /costs, antes de executar, ai tudo deu errado, mas refazendo bombou e o foco voltou novamente!
pqp véi, tu me salvou mt agr afhasdjfhasdkjfhasdflasdhl.
eu tbm tinha feito a msm coisa, tentei reinstalar com os comandos certinhos, agr foi, ufa
fui o like n° 1000 :)
Galera, estava batendo cabeça com o min-height: 75%, e o problema estava em estar escrevendo heigth e não height XD
Pessoal tem e estar dentro da tag Router
Home
Company
Contact
New Project
E o Container? Na minha aplicação ele não exibe as informações da Home, Contact, Company e NewProject
@@dellond
@@dellond
Vai ficar desse jeito
com o container, a única diferença que implementei o component
navbar
Home
Sobre
Contato
Projetos
Código de como corrigir o Erro do Swtich
function App() {
return (
)
}
export default App
Não consigo inserir o css alguem com o mesmo problema
Eu estou con esse problema também. Não sei se é o module.
O meu CSS não está acatando. Sabe o que pode ser?
Cara estava com o mesmo problema (apesar de que to respondendo dps de 1mês estou relatando como resolvi pra caso outra pessoa veja saiba como resolver), primeira coisa que você tem que fazer é mudar o switch pro routes, tem diversos comentários e o professor também fez um vídeo, mesmo com esse vídeo eu ainda estava com problema do meu CSS estar sendo aplicado. A mudança que eu fiz foi:
Quando eu importei o css não utilizei ele como um componente importado, apenas digitei o caminho do css import './Container.modules.css'; e hora de retornar o componente Container ao invés de fazer `${styles.container} ${ styles [props.customClass] }` eu fiz sem o style. ficou assim dai:
return(
{props.children}
);
@@MattheusPratt Obrigadaaa!! Resolveu o meu problema!
@@MattheusPratt solucionou minha dor de cabeça
Para quem ainda tiver dúvida o arquivo contanier.js fica assim :
import './Container.modules.css'
function Container(props){
return(
{props.children}
);
}
export default Container
@@dreammFacctoryyy o meu container n aplica só o min-height sabe porque?
👍👏
valeuu Zeriel!
Boa noite Matheus, ansisoso pelo projeto!
Uma duvida, teria como importar todas as pages de uma vez? Estilo import {Home, Contact, etc... } from pages
Tentei aqui mas deu erro, digamos que tivesse umas 20 paginas seria bem trabalhoso digitar todos os imports hehe abraço!
opa, tentei fazer isso durante a aula, mas estava dando erro tbm vc ja descobriu se é possível fazer o importe de tds de outra forma ?
@@simeoneholanda6420 não consegui ainda não :(
Pra quem está fazendo em 2022
O Switch não é mais usado no react-router-dom, agora é Routes
fica assim as rotas:
O meu min-height: 75%; não funciono
coloquei um background-color para ver se as configurações chegava no conteiner e chegou so a propriedade de "min-height: 75%;"
isso não esta fazendo o footer ir para baixo
se eu colocar 500px no min-height ele funciona
@@anao_giga Pefeito, so da uma olhada pq Container não fica na mesma pasta do pages.
Compilado com problemas:X
ERRO em ./src/componentes/layout/Contêiner.js 4:0-42
Módulo não encontrado: Erro: Não é possível resolver 'Container.module.css' em 'C:\User\user\Desktop\Curso\projeto\src\components\layout' Você quis dizer './Container.module.css'? As solicitações que devem ser resolvidas no diretório atual precisam começar com './'. As solicitações que começam com um nome são tratadas como solicitações de módulo e resolver dentro de diretórios de módulos (node_modules, C:\User\user\Desktop\Curso\projeto
ode_modules). Se alterar o código-fonte não é uma opção, há também uma opção de resolução chamada 'preferRelative' que tenta resolver esse tipo de solicitações no diretório atual também.
dando esse erro no meu.
Cara estou tendo o mesmo problema, ja tentei de tudo.
@@Brieffc conseguiu resolver ?
conseguiu resolver ?
Sim já resolvi
'Container.module.css' >>> não ta faltando um 's' em module ? 'Container.modules.css
aff desisto ta fedendo cada vez mais o projeto ,segui todos passso dos comentario nem ta exibindo a navbar
Colarei abaixo o código fonte desta aula
Código do "Container.js"
import styles from './Container.module.css'
function Container(props){
return(
{props.children}
)
}
export default Container
Código do apps.js
import {BrowserRouter as Router,Routes,Route, Link} from 'react-router-dom'
import Home from './components/pages/Home'
import Contact from './components/pages/Contact'
import Company from './components/pages/Company'
import NewProject from './components/pages/NewProject'
import Container from './components/pages/layout/Container'
function App() {
return (
Home
Contato
Empresa
Novo Projeto
Footer
);
}
export default App;
Código fonte doContainer.module.css
.container{
width: 1200px;
display: flex;
justify-content: space-between;
margin: 0 auto;
flex-wrap: wrap;
}
.minHeight{
min-height: 75%;
min-height: 75vh;
}
.start{
justify-content: flex-start;
}
.column{
}
Assista novamente, assita uma sem fazer nada , apenas prestando atenção e outra fazendo os códigos
@@anao_giga Obrigado por disponibilizar o código completo. Não tava achando o erro do Container e agora consegui resolver.
@@joatancarlos2704 por nada mano