8
respostas

Não sei qual o erro

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Repositório no Github: https://github.com/yancarlo0202/cinetag

8 respostas

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 :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado

Boa noite

Eu fiz a correção mas o erro permaneceu

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

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.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

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 :)

Repósitorio atualizado: https://github.com/yancarlo0202/cinetag

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.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade 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?

exibindo um print do projeto