Entrar Ainda não tem acesso?
2
respostas

[Bug] Menu nao abre as outras páginas, apenas digitando na url.

Referente ao curso React: desenvolvendo em React Router com JavaScript

por Lucas Carvalho da Rocha
| 158.2k xp | 7 posts

import { BrowserRouter, Route, Routes } from 'react-router-dom'; import Inicio from './paginas/inicio'; import Sobre from './paginas/sobreMim'; import Menu from './componentes/menu'; import Rodape from 'componentes/Rodape'; import PaginaPadrao from 'componentes/PaginaPadrao'; function Rotas() {

return(
  <BrowserRouter>
    
    <Menu/>
          
    <Routes> 
      
      <Route path="/" element={<PaginaPadrao/>}> 
        <Route index element={<Inicio />}/>
        <Route path="sobremim" element={<Sobre/>}/>
      </Route>
        
      <Route path="*" element={<div>Pagina não encontrada</div>} />
    </Routes>
  <Rodape/>
  </BrowserRouter>
)

}

export default Rotas;

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
2 respostas
por Estudante
| 55.2k xp | 55 posts

Olá Lucas!

Parece que você está construindo um sistema de rotas utilizando o React Router no seu projeto. No código que você compartilhou, você possui um componente chamado Rotas que contém as rotas do aplicativo e um componente MenuLink que cria um link de navegação com destaque para a rota ativa.

O componente Rotas é responsável por definir as rotas do aplicativo usando o React Router. Ele usa o componente BrowserRouter para envolver as rotas e permitir a navegação através das URLs. As rotas são definidas usando o componente Routes e os componentes associados a cada rota são especificados usando o atributo element.

Aqui está uma explicação do que o código faz:

  1. O componente Rotas é definido com a função Rotas(). Ele importa os módulos necessários do React Router, bem como os componentes Inicio, Sobre, Menu, Rodape e PaginaPadrao.

  2. Dentro do componente Rotas, há um retorno que envolve todas as rotas com o BrowserRouter.

  3. O componente Menu é renderizado dentro do BrowserRouter, o que significa que ele será exibido em todas as páginas, pois está fora das rotas.

  4. Em seguida, o componente Routes é usado para definir as rotas do aplicativo. O caminho raiz "/" é associado ao componente PaginaPadrao, que é renderizado em todas as páginas como um layout padrão.

  5. Dentro da rota raiz "/", há duas rotas filhas definidas com os caminhos "inicio" e "sobremim". Essas rotas são associadas aos componentes Inicio e Sobre, respectivamente, e serão renderizadas dentro do componente PaginaPadrao.

  6. Por fim, há uma rota curinga definida com o caminho "*", que será usada para exibir uma mensagem de "Página não encontrada" caso o usuário acesse uma URL inválida.

O componente MenuLink é responsável por criar links de navegação com destaque para a rota ativa. Ele importa o módulo NavLink do React Router e usa a propriedade isActive para aplicar uma classe de estilo especial ao link quando a rota associada estiver ativa.

No geral, parece que você está usando o React Router de forma correta para definir as rotas e criar links de navegação no seu aplicativo. Certifique-se de que todos os componentes importados estejam corretamente definidos e exportados, e o sistema de rotas deve funcionar corretamente.

Se você estiver enfrentando algum problema específico ou tiver mais dúvidas, sinta-se à vontade para fornecer mais detalhes, e eu ficarei feliz em ajudar!

por Lucas Carvalho da Rocha
| 158.2k xp | 7 posts

Olä! O problema que está acontecendo é no menu. Os links não estão sendo clicáveis e não está sendo redirecionado para outra página. Aqui está o código:

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

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

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