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