Repositório no Github: https://github.com/yancarlo0202/cinetag
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Olá, Yan, como vai?
No React, o uso da sintaxe de importação faz diferença, especialmente quando se trabalha com módulos ES6, que é o padrão dos projetos atuais. Utilizar require pode causar incompatibilidades ou dificultar a leitura do código.
Jeito que está no seu código no arquivo routes.jsx:
const { default: Inicio } = require("pages/Inicio");
const { BrowserRouter, Routes, Route } = require("react-router-dom");
Forma recomendada:
import Inicio from "pages/Inicio";
import { BrowserRouter, Routes, Route } from "react-router-dom";
A sintaxe import é reconhecida pelo React e pelas principais ferramentas de build. Isso garante que os componentes sejam importados corretamente e deixa o código mais limpo.
Espero ter ajudado.
Siga firme nos seus estudos e conte com o fórum sempre que precisar.
Abraços :)
Boa noite
Eu fiz a correção mas o erro permaneceu
import Inicio from "pages/Inicio";
const { BrowserRouter, Routes, Route } = require("react-router-dom");
function AppRoutes() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Inicio />}></Route>
</Routes>
</BrowserRouter>
)
}
export default AppRoutes;
Eu não havia notado na correção que precisa altera a linha 2 de "const" para "import", além de adicionar o "from", agora os erros no console sumiram, mas mesmo assim ainda não aparece nada na tela.
import Inicio from "pages/Inicio";
import { BrowserRouter, Routes, Route } from "react-router-dom";
function AppRoutes() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Inicio />}></Route>
</Routes>
</BrowserRouter>
)
}
export default AppRoutes;
Oi, Yan.
Em muitos casos, quando ajustamos as importações no React, pode ser necessário reiniciar o servidor de desenvolvimento para que as mudanças sejam reconhecidas, principalmente se o erro estava ligado a importações e módulos. Então, feche o terminal onde está rodando o React (normalmente com Ctrl+C), abra de novo e rode o comando npm start.
Se depois de reiniciar ainda não aparecer nada na tela, te peço que atualize o repositório novamente e assim eu verifico o que pode estar acontecendo.
Fico no aguardo e a disposição :)
Oi, Yan.
Os estilos do cabeçalho não estão sendo importados corretamente, no componente Cabecalho, você está importando o CSS assim:
import styles from './Cabecalho.modules.css';
Porém, para CSS Modules funcionar corretamente, o arquivo deve ser .module.css (sem o "s" no "module"). O nome correto seria Cabecalho.module.css, mas o seu arquivo está como Cabecalho.modules.css.
Esse erro faz com que o objeto styles fique vazio, e a classe CSS não é aplicada, podendo causar problemas de visualização. Basta renomear o arquivo e corrigir a importação.
import { Link } from "react-router-dom";
import logo from './logo.png';
import styles from './Cabecalho.module.css';
import CabecalhoLinks from "components/CabecalhoLinks";
Peço que teste e me retorne o resultado, por favor.
Fico no aguardo e a disposição :)
Voltou ao normal, mas o nav com o componente de CabecalhoLinks não está sendo carregado.
Repósitorio atualizado: https://github.com/yancarlo0202/cinetag
Oi, Yan.
O componente CabecalhoLinks é o responsável por exibir esses links para a Home e Favoritos, certo? É o único local no seu código onde esta sendo usado o componente, e na sua imagem eles estão aparecendo normalmente. Há algum erro sendo mostrado no console?
