Pra quem estiver com problemas com o Switch: O Switch foi substituído pelo Routes e teve uma pequena mudança na sintaxe. Substitua o "Switch" por "Routes" tanto no import quanto no corpo do código, e na criação da rota a sintaxe fica assim Edit: Se não funcionar da forma acima, tente sem a tag de fechamento do Route, utilizando somente selfclosing tag.
Diga dada pelo colega @Roberto Hebert de Souza Vinha. Aqui funcionou direitinho dessa forma, espero que ajude :D
Segue a solução para quem estiver vendo o vídeo recentemente como eu (05/11/2021) e teve problema com o Switch: Aparentemente o Switch foi descontinuado na versão mais recente do react-router-dom, portanto se você instalar ele atualmente não será possível utilizar o Switch. Para conseguir seguir os passos do vídeo será preciso utilizar Routes, que substituiu o Switch; para fazer isso basta mudar de Switch para Routes tanto no import quanto nas tags. Porém, tem mais um ponto: utilizando o Routes a tag do Route (não confunda com o próprio Routes, são elementos diferentes por um 's' no final) também sofreu modificações, pois agora se utiliza ele como uma self-closing tag e o componente para o qual ele redireciona agora é armazenado no atributo "element" dele mesmo. O código com essas correções fica da seguinte maneira: /* Parte do import */ import { BrowserRouter as Router, Routes, Route} from 'react-router-dom'; /* Substituindo o Switch e aplicando as novas modificações do Route */
Espero que isso ajude quem teve esse problema assim como eu para não precisar gastar muito tempo procurando a solução na internet. Link de onde tirei a solução: stackoverflow.com/questions/63124161/attempted-import-error-switch-is-not-exported-from-react-router-dom?rq=1
@@lucasporto2670 Eu procurei uma forma de poder continuar utilizando o Switch como no vídeo e aparentemente isso é possível utilizando uma versão anterior do react-router-dom. Para fazer isso basta colocar esses comandos no terminal: (para desinstalar o react-router-dom que já está no seu projeto) npm uninstall react-router-dom (para instalar a versão anterior do react-router-dom onde o Switch funciona normalmente) npm install react-router-dom@5.2.0 Dessa forma o erro com Switch não irá mais aparecer, porém não tenho certeza se será possível utilizar o Routes (que é a nova forma) Link da solução: stackoverflow.com/a/69849683
para quem teve problemas com o switch, aqui está o codigo corrigido: import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; import Home from './pages/Home'; import Contato from './pages/Contato'; import Empresa from './pages/Empresa'; function App() { return (
Galera a sintaxe para rotas (mudou) segue o novo exemplo import './App.css' import Contato from './pages/Contato'; import Empresa from './pages/Empresa'; import Homec from './pages/Home'; import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'; function App() { return (
Para quem está tendo problemas de não aparecer nada da aplicação você precisa importar o React em cada um dos documentos criados home, contato e empresa Ficaria assim import React from "react" function Home(){ return(
Caso o conteúdo não estiver sendo renderizado e o console apresentar alguns erros estranhos, ao invés de colocar os componentes dentro do Route, coloque a a prop element no Route, vai ficar desta forma:
Cara, esses cursos tiraram duvidas q professores de cursos nao conseguiram me fazer entender, velho tu ajudou no meu projeto e continua ajudando, parabéns e que isso lhe dê muito sucesso na tua vida.
Quem tiver problemas nessa aula. Faça esse passos: Desinstalar React-Router-Dom : npm uninstall react-router-dom Instalando o 6 npm install react-router-dom@6 Código com a nova sintaxe. import {BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'
Home Empresa Contato
Para o Matheus Battisti , Muito bom o conteúdo, parabéns.
@@MatheusBattisti ótimoo!! Ainda estou estudando sabe, mas com bastante prática baseado nesse curso, daria para estar apto para trabalhar usando React? Exemplo, em uma vaga caso seja um requisito.
Pessoal que esta fazendo agora o curso, e nao sabe o porque as aplicações nao estao indo. Pesquisa mais sobre react sobre o assunto que voce esta no momento , pq no react sempre esta atualizando e as vezes o que ele passou já nao usa mais. Um exemplo foi o "Switch" q virou "Route".
Para lidar com essas vulnerabilidades, você pode executar o comando sugerido: npm audit fix --force Isso tentará corrigir automaticamente as vulnerabilidades conhecidas. No entanto, é importante observar que usar --forcepode atualizar as dependências para versões que podem quebrar seu projeto. Portanto, é uma boa prática sempre verificar as atualizações e testar seu aplicativo após a correção das vulnerabilidades para garantir que ele ainda funcione conforme o esperado.
Aeeee.. eu voltei pra versao 5 do router so pra aprender com o incrivel prof Matheus Battisti, e deu bom. Muito obrigado.. depois dessa vou aprender a versao 6 que ele ja lançou aqui pra a gente tb. É nois
1: npm install react-router-dom@6.0.0-beta.0 // Instalando a versao 6.0.0 do react-router-dom 2: import { BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom' // Trocando o Switch por Routes 3:
//Alterando a sintaxe de onde era o Switch que passou a ser Routes, logo as tag Route mudaram de sintaxe tbm
na hora de instalar deu isso aqui: up to date, audited 1399 packages in 5s 205 packages are looking for funding run `npm fund` for details 6 high severity vulnerabilities To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details. é normal?
Depois de passar algumas horas batendo a cabeça para fazer a página aparecer consegui fazendo o seguinte: No arquivo package.json alterar o campo “scripts” para o seguinte: "scripts": { "start": "react-scripts --openssl-legacy-provider start", "build": "react-scripts --openssl-legacy-provider build", "test": "react-scripts test", "eject": "react-scripts eject" }, E importar o react nas 4 páginas (App.js, Home.js, Contato.js e Empresa.js) colocando o código a seguir na parte de cima do arquivo “import React from 'react';” Mexi em um monte de coisa que nem me lembro mais, mas acho que foi isso que resolveu o problema.
aulas mt boas, faz um video de dicas pra conseguir ser um dev junior, tem um tempo que eu estudo mas ainda nao consegui uma vaga na area , intao dicas de cursos nescessarios pro curriculo , projetos pra implementar o portiforio essas coisas para impressionar o recrutador, obg
Muito boas as aulas. Queria uma sugestão de como salvar cada uma para consulta futura. Entender não é o problema, o problema é lembrar dos detalhes depois, por isto tem que deixar salvo. Mas sempre tem que começar cada aula usando o mesmo arquivo. Como fazer para que o index.html aponte para um arquivo que não seja o App.js?
Matheus, comecei um curso de React, mas estou encontrando algumas dificuldades. Parece que o conteúdo está desatualizado, especialmente quando chegamos às aulas sobre rotas. Tive que atualizar o pacote react-router-dom, mas mesmo assim não funcionou como esperado. Você poderia me recomendar um curso mais atualizado sobre React, preferencialmente disponível na Udemy? Gostaria de aprender com um conteúdo que reflita as práticas e tecnologias mais recentes utilizadas no mercado de trabalho. Agradeço desde já pela sua ajuda!
Matheus, existe alguma forma mais bonita de organizar isso? Por exemplo, no Vue temos apenas um e, de forma separada, um arquivo de rotas que exporta um objeto que indica qual rota renderiza qual componente. Teria algo parecido assim no React?
Uma solução que eu pensei aqui, foi encapsular o Routes (Switch) e os "Route" em um componente, e instanciá-lo no App.js, assim, toda a lógica de operação das rotas fica em um único arquivo.
Eu so fiquei com uma 'dúvida' do porque exatamentre foi dividido a tela com o NAVBAR e o routrer em dois componentes? Não seria melhor deixar ambas as coisas em um único componente? E parabéns pelo curso, tentei outros mas nao estava fluindo, sua didática é muito boa! Obrigado.
Não sei se alguem está com o mesmo problema do Swicth ainda, mas aqui vai uma solução. Eu fiz todo processo de atualização também e passei a usar o Routes mas não estava funcionando, a única solução que achei foi no StackOverflow, que é basicamente não fechar com duas Tags o Route: Se caso não funciona e de um erro no console de Link faz esse import " import {BrowserRouter as Router,Routes,Route,Link} from 'react-router-dom' " no seu componente que possuí o Navbar.
Matheus... supondo que o componente destino da rota seja uma busca com dois parâmetros, como passar esses parâmetros para o componente da rota '/search' por exemplo...
Ta uma salada de nomes desgraçada entre Router, Routes e Route, acho que não só eu estou confundindo no começo, stackoverflow salvando mais uma vez. O ruim dessas bibliotecas e frameworks em JS é esse fato de atualizações constantes que devem ta quebrando as aplicações por ai.
abaixo o cod correto atualizado devido atualizações import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; import Home from './Page/Home'; import Empresa from './Page/Empresa'; import Contato from './Page/Contato'; function App() { return (
Depois de olhar os comentários consegue resolver o problema do "Switch" baixando o 'react-router-dom' mais antigo, mas agora a minha pagina não carrega sozinha nas trocas de rotas, eu tenho q escolher qual pagina vou e atualizar a pagina para carregar aquela que escolhi, não sei oq fazer
Mais uma ajuda pra quem ainda estiver tendo dificuldades após alterar o código para as versões mais recentes(Switch para Routes): Certifique-se que quando você der o comando "npm install react-router-dom" o caminho do diretório no terminal esteja correto para a pasta do seu projeto, senão você vai estar instalando o pacote numa pasta aleatória.
ERROR Cannot read properties of null (reading 'useRef') TypeError: Cannot read properties of null (reading 'useRef') fui fazendo tudo o que o pessoal tava falando nos comentarios e mesmo assim deu erro, o router-dom ta na versão 6.10.0 aqui, alguem me ajudaa
import {BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom' import Home from './pages/Home' import Empresa from './pages/Empresa' import Contato from './pages/Contato' import './App.css' function App() { return (
Tive problema com o Switch que não está no react-router-dom alguém teve o mesmo problema ou saberia como solucionar? Obs: todos os outro estão no arquivo base no react-router-dom menos esse
O Switch foi substituído pelo Routes e teve uma pequena mudança na sintaxe. Substitua o Switch por Routes tanto no import quanto no corpo do código, e na criação da rota a sintaxe fica assim Aqui funcionou direitinho dessa forma, espero que ajude :D
Tudo bem @@renatasouzaesilvadev !? No seu projeto vc conseguiu navegar pelas páginas? Vi que a palavra chave "exact" não existe na versão 6 do React, que poderia ficar sem que funcionava da mesma forma. No meu não está funcionando! O meu está assim: ...return (
); No seu projeto vc consegue navegar entre as páginas sem o "exact"??
Já descobrir o meu erro kkkkkk No componente "NavBar" esqueci de colocar o caminho correto após o "/" com o nome da página. Havia deixado tudo só com barra. Éh o erro de copiar e colar kkkkk
Pessoal em 2024 assim funcionou ..... // importar Rotas e componentes import { BrowserRouter as Router, Routes, Route , Link} from 'react-router-dom'; // importar os tres componentes import Home from "./pages/Home"; import Empresa from "./pages/Empresa"; import Contato from "./pages/Contato"; function App() { return (
Quando acontecer algo parecido novamente, foque em aprender o principal. Eu tambem estou tendo problema com o css aqui no react. Eu tinha aprendido alguns dias atrás e logo nao pratiquei mais. Agora eu só foquei em aprender o que o tutorial propos, e alguma outra hora eu volto para rever a questao do css em alguma outra video aula.
não consigo reparar esse erro Módulo não encontrado: Erro: Não é possível resolver './components/layout/Navbar' em 'C:\Users\Rennifer\Desktop\Udemi\helloworld\meu-projeto\src'
import { BrowserRouter as Router, Route, Routes} from 'react-router-dom' import Home from './pages/Home' import Empresa from './pages/Empresa' import Contato from './pages/Contato' import Navbar from './components/layout/Navbar' import Footer from './components/layout/Footer' Mas ja declarei o Navbar
O Switch foi substituido por Routes O código, atualmente, fica assim: import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom' import Home from './pages/Home' import Contato from './pages/Contato' import Empresa from './pages/Empresa' import NavBar from './components/layout/NavBar' import Footer from './components/layout/Footer' function App() { return (
Gente preciso de ajuda, quando instalo o react router dom isso PS D:\Developer\React\Aula\meu-projeto> npm install react-router-dom up to date, audited 1474 packages in 22s 231 packages are looking for funding run `npm fund` for details 6 high severity vulnerabilities To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details.
depois de baixar o react-router-dom a sintaxe do código deve ficar assim // import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom' Substituam assim: Switch por Route Route por Routes import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom' import Home from './pages/Home' import Empresa from './pages/Empresa'; import Contato from './pages/Contato'; function App() { return (
Home
Empresa
Contado
) } export default App; Galera é assim que o código deve ficar. Assim não dará erro. Valeu galera! Espero ter ajudado vcs 😁
Pra quem está assistindo agora, em 2024, e teve problema com o "Switch". Esse problemas se deu por contar das novas atualizações. Pra resolver esse problema, fiz as seguintes alterações: 1 - nas tags "" você tem que colocar o " to="/" "; 2 - nas tags substitua por e dentro de dela você colocar a tag .
Pra quem estiver com problemas com o Switch:
O Switch foi substituído pelo Routes e teve uma pequena mudança na sintaxe.
Substitua o "Switch" por "Routes" tanto no import quanto no corpo do código, e na criação da rota a sintaxe fica assim
Edit: Se não funcionar da forma acima, tente sem a tag de fechamento do Route, utilizando somente selfclosing tag.
Diga dada pelo colega @Roberto Hebert de Souza Vinha.
Aqui funcionou direitinho dessa forma, espero que ajude :D
boa! Pretendo fazer um vídeo explicando
Excelente! Particularmente achei que colocar tudo como "Router", "Routes" e "Route" deixou muito mais confuso... 🤷♂️
@@vitinhocbl Concordo, fica tudo muito parecido ¯\_(ツ)_/¯
Vlw Renata
Vlw :D
Segue a solução para quem estiver vendo o vídeo recentemente como eu (05/11/2021) e teve problema com o Switch:
Aparentemente o Switch foi descontinuado na versão mais recente do react-router-dom, portanto se você instalar ele atualmente não será possível utilizar o Switch. Para conseguir seguir os passos do vídeo será preciso utilizar Routes, que substituiu o Switch; para fazer isso basta mudar de Switch para Routes tanto no import quanto nas tags.
Porém, tem mais um ponto: utilizando o Routes a tag do Route (não confunda com o próprio Routes, são elementos diferentes por um 's' no final) também sofreu modificações, pois agora se utiliza ele como uma self-closing tag e o componente para o qual ele redireciona agora é armazenado no atributo "element" dele mesmo. O código com essas correções fica da seguinte maneira:
/* Parte do import */
import { BrowserRouter as Router, Routes, Route} from 'react-router-dom';
/* Substituindo o Switch e aplicando as novas modificações do Route */
Espero que isso ajude quem teve esse problema assim como eu para não precisar gastar muito tempo procurando a solução na internet.
Link de onde tirei a solução: stackoverflow.com/questions/63124161/attempted-import-error-switch-is-not-exported-from-react-router-dom?rq=1
Cara, você é sensacional, gratidão.
Agora está dando erro no react-route-dom KKKKKKKKK
@@lucasporto2670 Eu procurei uma forma de poder continuar utilizando o Switch como no vídeo e aparentemente isso é possível utilizando uma versão anterior do react-router-dom.
Para fazer isso basta colocar esses comandos no terminal:
(para desinstalar o react-router-dom que já está no seu projeto)
npm uninstall react-router-dom
(para instalar a versão anterior do react-router-dom onde o Switch funciona normalmente)
npm install react-router-dom@5.2.0
Dessa forma o erro com Switch não irá mais aparecer, porém não tenho certeza se será possível utilizar o Routes (que é a nova forma)
Link da solução: stackoverflow.com/a/69849683
@@MatheusPatrick putz, salvou a pátria! Top cara, valeu pela ajuda.
Ou cara Muito Obg vei
para quem teve problemas com o switch, aqui está o codigo corrigido:
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import Contato from './pages/Contato';
import Empresa from './pages/Empresa';
function App() {
return (
Home
empresa
Contato
)
}
export default App;
basta copiar e colar no seu VSCODE!!
Galera a sintaxe para rotas (mudou) segue o novo exemplo
import './App.css'
import Contato from './pages/Contato';
import Empresa from './pages/Empresa';
import Homec from './pages/Home';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
function App() {
return (
Home
Empresa
Contato
);
}
export default App;
Fiquei 40min tentando entender o que não estava funcionando no meu código, e depois vi que estava declarando os Links com letra minuscula 😅
@@MrLeCrets todo o programador passa por isso
Eu ia falar sobre o Switch mas a galera já salvou todo mundo!
Para quem está tendo problemas de não aparecer nada da aplicação você precisa importar o React em cada um dos documentos criados home, contato e empresa
Ficaria assim
import React from "react"
function Home(){
return(
Home
Conteúdo da página
)
}
export default Home
Obrigado pela dica moça.
nem assim vai. nas outras aulas eu tava bem, mas nessa travei até cansar
Obrigada! No meu projeto eu estava com esse problema 😄
a versao mudou agora, muitos hooks n usa mais
@@ricardom.r.finkelstein1795 deve ta tendo problemas com o switch mano, olha o ai que tem um comentario ensinando a resolver
Comprei um curso na Udemy e não entendi nada, hoje vendo esse curso maravilhoso e GRATUITO já consigo utilizar o react fácil fácil
boa! =D
Comprou de quem? Pra eu não comprar kk
Mas o que é comprado ele é maior é mais intensivo pelo menos o que é do Matheus
Caso o conteúdo não estiver sendo renderizado e o console apresentar alguns erros estranhos, ao invés de colocar os componentes dentro do Route, coloque a a prop element no Route, vai ficar desta forma:
Lucas valeuzao... tinha visto no SOF, mas tinha ficado com dúvidas... obrigado.
te amo
Cara, esses cursos tiraram duvidas q professores de cursos nao conseguiram me fazer entender, velho tu ajudou no meu projeto e continua ajudando, parabéns e que isso lhe dê muito sucesso na tua vida.
Não canso de dizer o quanto você é incrível! Obrigadooooooo
tou entendendo o básico, mas tou praticando
boa!
Quem tiver problemas nessa aula.
Faça esse passos:
Desinstalar React-Router-Dom :
npm uninstall react-router-dom
Instalando o 6
npm install react-router-dom@6
Código com a nova sintaxe.
import {BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'
Home
Empresa
Contato
Para o Matheus Battisti , Muito bom o conteúdo, parabéns.
Que curso sensacional. Muito objetivo, com uma didática impecável. Estou utilizando React super bem. Parabéns cara 👏🏽
valeu Gilson, estou produzindo um para a Udemy tb =)) deve lançar em abril
@@MatheusBattisti ótimoo!! Ainda estou estudando sabe, mas com bastante prática baseado nesse curso, daria para estar apto para trabalhar usando React? Exemplo, em uma vaga caso seja um requisito.
Melhor aula de React Router do TH-cam!
tem a atualização para o v6 no fim do curso tb =D
@@MatheusBattisti com certeza irei ver!
Ansioso pelo projeto
acredito que semana q vem já começa Enzo!
@@MatheusBattisti vlwww pelo curso Matheus, vc é brabo!!
Muito bom, Matheus!
Estou ansioso pela continuidade deste curso!
oi Wanderson, segunda tem mais =))
Pessoal que esta fazendo agora o curso, e nao sabe o porque as aplicações nao estao indo. Pesquisa mais sobre react sobre o assunto que voce esta no momento , pq no react sempre esta atualizando e as vezes o que ele passou já nao usa mais. Um exemplo foi o "Switch" q virou "Route".
Curso top demais!!
Ai instalar o React Router informou "6 high severity vulnerabilities"
Algo para se preocupar em projetos reais?
tbm
Para lidar com essas vulnerabilidades, você pode executar o comando sugerido:
npm audit fix --force
Isso tentará corrigir automaticamente as vulnerabilidades conhecidas. No entanto, é importante observar que usar --forcepode atualizar as dependências para versões que podem quebrar seu projeto. Portanto, é uma boa prática sempre verificar as atualizações e testar seu aplicativo após a correção das vulnerabilidades para garantir que ele ainda funcione conforme o esperado.
Aeeee.. eu voltei pra versao 5 do router so pra aprender com o incrivel prof Matheus Battisti, e deu bom. Muito obrigado.. depois dessa vou aprender a versao 6 que ele ja lançou aqui pra a gente tb. É nois
Visto
1: npm install react-router-dom@6.0.0-beta.0
// Instalando a versao 6.0.0 do react-router-dom
2: import { BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom'
// Trocando o Switch por Routes
3:
//Alterando a sintaxe de onde era o Switch que passou a ser Routes, logo as tag Route mudaram de sintaxe tbm
Esse comentário salvou os meus estudos em react. Muito obrigado, amigo!
Maravilha. Você ganhou mais um aluno e seguidor. Obrigado
valeu amigo!
aee macho valeu visse!!! didatica excelente!
na hora de instalar deu isso aqui:
up to date, audited 1399 packages in 5s
205 packages are looking for funding
run `npm fund` for details
6 high severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
é normal?
Parabéns Matheus. Aula top! 🔥🔥
valeuu Eric! =D
Conteúdo líder 🔥
valeuu Rafael!
Depois de passar algumas horas batendo a cabeça para fazer a página aparecer consegui fazendo o seguinte:
No arquivo package.json alterar o campo “scripts” para o seguinte:
"scripts": {
"start": "react-scripts --openssl-legacy-provider start",
"build": "react-scripts --openssl-legacy-provider build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
E importar o react nas 4 páginas (App.js, Home.js, Contato.js e Empresa.js) colocando o código a seguir na parte de cima do arquivo “import React from 'react';”
Mexi em um monte de coisa que nem me lembro mais, mas acho que foi isso que resolveu o problema.
Excelentes aulas! Parabéns! Tem me ajudado bastante...
Professor, nesse projeto, você vai ensinar a colocar ele online? para eu conseguir acessar de outra máquina?
opa Alvaro, não não, apenas desenvolvimento em React
aulas mt boas, faz um video de dicas pra conseguir ser um dev junior, tem um tempo que eu estudo mas ainda nao consegui uma vaga na area , intao dicas de cursos nescessarios pro curriculo , projetos pra implementar o portiforio essas coisas para impressionar o recrutador, obg
Muito boas as aulas. Queria uma sugestão de como salvar cada uma para consulta futura. Entender não é o problema, o problema é lembrar dos detalhes depois, por isto tem que deixar salvo. Mas sempre tem que começar cada aula usando o mesmo arquivo. Como fazer para que o index.html aponte para um arquivo que não seja o App.js?
Muito massa teu conteúdo um dos melhores.
Muito bom 👏👏
valeuu Zeriel! =)
Matheus, comecei um curso de React, mas estou encontrando algumas dificuldades. Parece que o conteúdo está desatualizado, especialmente quando chegamos às aulas sobre rotas. Tive que atualizar o pacote react-router-dom, mas mesmo assim não funcionou como esperado. Você poderia me recomendar um curso mais atualizado sobre React, preferencialmente disponível na Udemy? Gostaria de aprender com um conteúdo que reflita as práticas e tecnologias mais recentes utilizadas no mercado de trabalho. Agradeço desde já pela sua ajuda!
Matheus, existe alguma forma mais bonita de organizar isso? Por exemplo, no Vue temos apenas um e, de forma separada, um arquivo de rotas que exporta um objeto que indica qual rota renderiza qual componente. Teria algo parecido assim no React?
Uma solução que eu pensei aqui, foi encapsular o Routes (Switch) e os "Route" em um componente, e instanciá-lo no App.js, assim, toda a lógica de operação das rotas fica em um único arquivo.
Eu so fiquei com uma 'dúvida' do porque exatamentre foi dividido a tela com o NAVBAR e o routrer em dois componentes?
Não seria melhor deixar ambas as coisas em um único componente?
E parabéns pelo curso, tentei outros mas nao estava fluindo, sua didática é muito boa! Obrigado.
Não sei se alguem está com o mesmo problema do Swicth ainda, mas aqui vai uma solução.
Eu fiz todo processo de atualização também e passei a usar o Routes mas não estava funcionando, a única solução que achei foi no StackOverflow, que é basicamente não fechar com duas Tags o Route:
Se caso não funciona e de um erro no console de Link faz esse import " import {BrowserRouter as Router,Routes,Route,Link} from 'react-router-dom' " no seu componente que possuí o Navbar.
Aula top!!!
Cara, vc é foda!
Usar o Outlet tem a mesma função que o exact?
Aula excelente!
Matheus... supondo que o componente destino da rota seja uma busca com dois parâmetros, como passar esses parâmetros para o componente da rota '/search' por exemplo...
Na parte do Switch, o meu só funcionou assim:
Ta uma salada de nomes desgraçada entre Router, Routes e Route, acho que não só eu estou confundindo no começo, stackoverflow salvando mais uma vez.
O ruim dessas bibliotecas e frameworks em JS é esse fato de atualizações constantes que devem ta quebrando as aplicações por ai.
O objetivo deve ser esse, pra manter as empresas sempre precisando de nós"
tem algum jeito de fazer a mesma coisa (no caso mudar de pagina) sem o react router?
abaixo o cod correto atualizado devido atualizações
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Home from './Page/Home';
import Empresa from './Page/Empresa';
import Contato from './Page/Contato';
function App() {
return (
Home
Empresa
Contato
);
}
export default App;
Depois de olhar os comentários consegue resolver o problema do "Switch" baixando o 'react-router-dom' mais antigo, mas agora a minha pagina não carrega sozinha nas trocas de rotas, eu tenho q escolher qual pagina vou e atualizar a pagina para carregar aquela que escolhi, não sei oq fazer
Mais uma ajuda pra quem ainda estiver tendo dificuldades após alterar o código para as versões mais recentes(Switch para Routes): Certifique-se que quando você der o comando "npm install react-router-dom" o caminho do diretório no terminal esteja correto para a pasta do seu projeto, senão você vai estar instalando o pacote numa pasta aleatória.
ERROR
Cannot read properties of null (reading 'useRef')
TypeError: Cannot read properties of null (reading 'useRef')
fui fazendo tudo o que o pessoal tava falando nos comentarios e mesmo assim deu erro, o router-dom ta na versão 6.10.0 aqui, alguem me ajudaa
Descobriu a solução?
@@vitorialelis não
@@LuucasGameerPB conseguiu achar a solução amigo?
@@antonioaugusto234 não, deixei de lado esse projeto
estou abandonando o meu tambem não consigo resolver erssa porra de jeito nenhum
Estou tentando de todas as formas mas não estou conseguindo, copilar meus Route, com a tag Routes, uma vez que o Switch foi descontinuado.
import {BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom'
import Home from './pages/Home'
import Empresa from './pages/Empresa'
import Contato from './pages/Contato'
import './App.css'
function App() {
return (
Home
Empresa
Contato
)
}
export default App
Eu posso criar rota no proprio componente sem ser do App.js ?
Deu certo?
qual a extensão usada pra organizar o código ?
alt + shift + f organiza o código
show!!!
atualiza ocurso por favorrr
Tive problema com o Switch que não está no react-router-dom alguém teve o mesmo problema ou saberia como solucionar? Obs: todos os outro estão no arquivo base no react-router-dom menos esse
Conseguir resolver esse problema, mas foi sem switch
O Switch foi substituído pelo Routes e teve uma pequena mudança na sintaxe. Substitua o Switch por Routes tanto no import quanto no corpo do código, e na criação da rota a sintaxe fica assim
Aqui funcionou direitinho dessa forma, espero que ajude :D
@@renatasouzaesilvadev funcionou sim. Muito obrigado!
Tudo bem @@renatasouzaesilvadev !?
No seu projeto vc conseguiu navegar pelas páginas? Vi que a palavra chave "exact" não existe na versão 6 do React, que poderia ficar sem que funcionava da mesma forma. No meu não está funcionando!
O meu está assim:
...return (
);
No seu projeto vc consegue navegar entre as páginas sem o "exact"??
Já descobrir o meu erro kkkkkk
No componente "NavBar" esqueci de colocar o caminho correto após o "/" com o nome da página.
Havia deixado tudo só com barra. Éh o erro de copiar e colar kkkkk
Erro 404 na instalação do npm install react-router-dom
Acrescentar a versão de atualização, fica assim:
npm install react-router-dom@v5
Module not found: Error: Can't resolve 'react-router-dom'
Se der pau no switch segue outra dica: Usar essa versão do react-router-dom: npm install react-router-dom@5.2.0
Pessoal em 2024
assim funcionou .....
// importar Rotas e componentes
import { BrowserRouter as Router, Routes, Route , Link} from 'react-router-dom';
// importar os tres componentes
import Home from "./pages/Home";
import Empresa from "./pages/Empresa";
import Contato from "./pages/Contato";
function App() {
return (
Home
Contato
Empresa
);
}
export default App;
O seu modelo funcionou aqui.
obrigado.
Tamo junto 😊
Não sei pq o css não está funcionando. (as className)
Tags normais funcionam normal, mas as className não está.
Quando acontecer algo parecido novamente, foque em aprender o principal.
Eu tambem estou tendo problema com o css aqui no react. Eu tinha aprendido alguns dias atrás e logo nao pratiquei mais.
Agora eu só foquei em aprender o que o tutorial propos, e alguma outra hora eu volto para rever a questao do css em alguma outra video aula.
não consigo reparar esse erro
Módulo não encontrado: Erro: Não é possível resolver './components/layout/Navbar' em 'C:\Users\Rennifer\Desktop\Udemi\helloworld\meu-projeto\src'
import { BrowserRouter as Router, Route, Routes} from 'react-router-dom'
import Home from './pages/Home'
import Empresa from './pages/Empresa'
import Contato from './pages/Contato'
import Navbar from './components/layout/Navbar'
import Footer from './components/layout/Footer'
Mas ja declarei o Navbar
Meu ficou com webpack compiled with 1 error então olhei tudo e nada de errado e não sai esse erro, alguém pode me ajudar ?
nao consigo instalar o Router no vscode, da erro ! Alguem me ajude, por favor
Estou tendo problema com a instalação do router. ele fica dando esse erro, como faço pra resolver?
O Switch foi substituido por Routes
O código, atualmente, fica assim:
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'
import Home from './pages/Home'
import Contato from './pages/Contato'
import Empresa from './pages/Empresa'
import NavBar from './components/layout/NavBar'
import Footer from './components/layout/Footer'
function App() {
return (
);
}
Obs: IMPORTANTE ' import React from "react"; ' em todos componentes
amigo nem respondo comentários, mas obrigado vc salvou meu dia, já estava há 4 horas tentando resolver isso aqui
Gente preciso de ajuda, quando instalo o react router dom isso
PS D:\Developer\React\Aula\meu-projeto> npm install react-router-dom
up to date, audited 1474 packages in 22s
231 packages are looking for funding
run `npm fund` for details
6 high severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
depois de baixar o react-router-dom a sintaxe do código deve ficar assim
// import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'
Substituam assim:
Switch por Route
Route por Routes
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom'
import Home from './pages/Home'
import Empresa from './pages/Empresa';
import Contato from './pages/Contato';
function App() {
return (
Home
Empresa
Contado
)
}
export default App;
Galera é assim que o código deve ficar. Assim não dará erro. Valeu galera! Espero ter ajudado vcs 😁
@@joabemoreira2879 vlw lidao se nao e 10 se e 11
@@hoskar263 hã? Eu não entendi o que vc escreveu
@@joabemoreira2879 ele quis dizer que você não é 10, você é 11
O parâmetro `exact` não é mais necessário.
Meu app não renderiza nada =/
achou uma soluçao? to com o mesmo problema
achei qual era meu problema, tinha um 'Link' que estava escrito 'link'
@@kauanes.5533 boa, eu não conseguia por causa da versão do react router kk
Dando tudo errado aqui, já tentei de tudo e não funciona
o react teve atualizaçõs, vê os comnetários que o pessoal corrigiu o código
@@antonioaugusto234 SIm consegui, obrigado!
@@davidm.1263 como vc fez
Galera, alguém me ajuda, Ainda não estou conseguindo resolver o problema!
Conseguiu?
Envia o erro aqui para eu tentar entender.
Pra quem está assistindo agora, em 2024, e teve problema com o "Switch". Esse problemas se deu por contar das novas atualizações.
Pra resolver esse problema, fiz as seguintes alterações:
1 - nas tags "" você tem que colocar o " to="/" ";
2 - nas tags substitua por e dentro de dela você colocar a tag .
Ensina rápido demais. Um iniciante não consegue acompanhar o raciocínio.
Quem estiver com Problemas com o react router dom...
th-cam.com/video/UjHT_NKR_gU/w-d-xo.html
meu deu erro ERROR in ./src/App.js 19:35-41
npm i react-router-dom@5.2.0
Pra quem n quiser ter dor de cabeça com a v6 do router pq muda tudo
instalei essa versao e funcionou mais tem que desinstalar a versao recente antes de instalar essa npm install react-router-dom@5.2.0
Compiled with problems:X
ERROR in ./src/App.js 65:37-43
export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' (possible exports: BrowserRouter, HashRouter, Link, MemoryRouter, NavLink, Navigate, NavigationType, Outlet, Route, Router, Routes, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, createPath, createRoutesFromChildren, createSearchParams, generatePath, matchPath, matchRoutes, parsePath, renderMatches, resolvePath, unstable_HistoryRouter, useHref, useInRouterContext, useLinkClickHandler, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, useSearchParams) aparece assim para mim
Switch não existe mais, agora é Routes
Aula Top!!!