Entrar Ainda não tem acesso?
3
respostas

O conteudo sobre mim não aparece.

Referente ao curso React: desenvolvendo em React Router com JavaScript, no capítulo Rotas aninhadas e atividade Desenvolvendo SobreMim

por Victor Jose Ferreira de Araujo
| 56.4k xp | 2 posts

Quando clico na opção Sobre mim o seu conteúdo n aparece.!!

codigo do app.js 


import { BrowserRouter, Routes, Route } from "react-router-dom"
import Inicio from "./Paginas/Inicio";
import SobreMim from "./Paginas/SobreMim";
import Menu from "./componentes/menu";
import Rodape from "componentes/Rodape";
import PaginaPadrao from "componentes/PaginaPadrao";


function App() {
  return (
    <BrowserRouter>
      <Menu/>
    
      <Routes>


        <Route path="/" element={<PaginaPadrao />}>
            <Route index element={<Inicio />} />
            <Route path="Sobremim" element={<SobreMim />} />
        </Route>


        
        <Route  path="*" element={<div>Página não encontrada</div>}/>

      </Routes>

      <Rodape/>

    </BrowserRouter>
    
  );
}

export default App;

codigo do sobre mim 

import styles from './SobreMim.module.css'

import PostModelo from "componentes/PostModelo";
import fotoCapa from "assets/sobre_mim_capa.png"
import fotoSobreMim from "assets/sobre_mim_foto.png"



export default function SobreMim(){
    return (
            <PostModelo
                fotoCapa={fotoCapa}
                titulo="Sobre mim"
                >
                    
                    <h3 className={styles.subtitulo}>
                        Ola, eu sou Victor
                    </h3>

                    <img
                        src={fotoSobreMim}
                        alt="foto ai"
                        className={styles.fotoSobreMim}
                    />

            </PostModelo>
        
        
    )
}

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

3 respostas
por RODRIGO SILVA HARDER
| 2300.6k xp | 4888 posts
Alura Scuba Team Monitor de Fórum Ops

Oi, Victor, tudo bem?

Peço que você compartilhe o link do seu projeto no GitHub ou uma pasta com todos os arquivos que você utilizou no através do Google Drive. Dessa forma, conseguirei realizar os testes necessários e te ajudar de forma mais assertiva.

Lembre-se que, se enviar os arquivos por meio do Google Drive, é necessário conceder permissão para que eu possa ter acesso.

Fico no aguardo!

por Victor Jose Ferreira de Araujo
| 56.4k xp | 2 posts

o link: https://github.com/victorjose20/ola-mundo

por RODRIGO SILVA HARDER
| 2300.6k xp | 4888 posts
Alura Scuba Team Monitor de Fórum Ops

Oi, Victor, tudo bem?

O problema está no componente "PostModelo", nele você está inserindo a palavra "Children" com a letra "c" maiúscula, contudo por padrão ela é escrita com letra minúscula no React. Isso faz com que a página "Sobre mim" não consiga identificar os elementos inseridos dentro do componente "PostModelo". Com a correção, o código ficaria assim:

export default function PostModelo({children, fotoCapa, titulo}){
    return(
        <article className={styles.postModeloContainer}>
            <div className={styles.fotoCapa}
            style={{ backgroundImage: ` url(${fotoCapa})`}}>  
            </div>
            <h2 className={styles.titulo}>
                {titulo}
            </h2>

            <div className={styles.postConteudoContainer}>
                {children}

            </div>
        </article>
    )
}

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!