Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

O botão de navegador para outra página não funciona apenas na página inicial e na página sobre mim

Aqui está o código:

Menu-link

import {NavLink} from "react-router-dom"
import styles from "./menulink.module.css"

const MenuLink=({children, to})=>{
    
    return (
                <NavLink className={({isActive})=>
                    `${styles.link}
                    ${isActive ? styles.link_destacado : ""}
                      
                    `}
                    
                    to={to}
                    end
                    >
                    {children}
                </NavLink>
    )
}
export default MenuLink

PaginaPadrao

import Banner from "componentes/Banner"
import { Outlet } from "react-router-dom"
const PaginaPadrao=()=>{
    return(
        <main>
           <Banner/>
           <Outlet/>
        </main>
    )
}
export default PaginaPadrao

AppRoutes;


import Rodape from "componentes/Rodape";

import Post from "paginas/Post";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Menu from "componentes/menu";
import Sobre from "paginas/sobreMim";
import Inicio from "paginas/inicio";
import NaoEncontrada from "paginas/NaoEncontrada";
import PaginaPadrao from "componentes/PaginaPadrao";

function AppRoutes() {
  return (
    <BrowserRouter>
      <Menu />

      <Routes>
        <Route path="/" element={<PaginaPadrao />}>
          <Route index element={<Inicio />} />
          <Route path="sobremim" element={<Sobre />} />
          <Route path="posts/:id" element={<Post />} />
        </Route>
        
          <Route path="*" element={<NaoEncontrada />} />
      </Routes>

      <Rodape />
    </BrowserRouter>
  );
}

export default AppRoutes;

Menu

import MenuLink from "componentes/menulink"
import styles from "./menu.module.css"
const Menu=()=>{
    
   
    
    return (
        <header>
            <nav className={styles.navegacao}>
                
                <MenuLink to="/">
                    Inicio
                </MenuLink>
                <MenuLink to="/sobremim">
                    Sobre 
                </MenuLink>

            </nav>
        </header>
    )
}
export default Menu

Quando tiro o Banner do arquivo página padrão o nav funciona. Porém com o Banner ele não funciona

2 respostas
solução!

Olá, Lucas!

Peço desculpas pela demora em obter um retorno.

Pelo código que você compartilhou, parece que o problema está relacionado ao componente Banner dentro do componente PaginaPadrao. Quando você remove o Banner, o botão de navegação funciona, mas quando o Banner está presente, o botão não funciona, certo?

Uma possível solução para esse problema é verificar se o Banner está interferindo no funcionamento do botão de navegação. Você pode tentar isolar o Banner em um componente separado e verificar se o problema persiste. Por exemplo:

import { Outlet } from "react-router-dom"
import Banner from "componentes/Banner"

const PaginaPadrao = () => {
  return (
    <main>
      <Banner />
      <Outlet />
    </main>
  )
}

export default PaginaPadrao

Dessa forma, o Banner será renderizado separadamente do restante do conteúdo da página. Verifique se o botão de navegação funciona corretamente com essa alteração.

Caso o problema persista, pode ser necessário investigar o código do componente Banner para identificar se há algum trecho que está interferindo no comportamento do botão de navegação.

Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso

Um grande abraço e até mais!

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

Olá! O banner continha uma imagem que atrapalhava o funcionamento do menu. Obrigado!