0
55
ViewsGatsby Link no funciona con isPartially Active en páginas renderizadas MDX
He estado construyendo un sitio estático con gatsby y algunas secciones he renderizado páginas escritas como MDX y analizadas a través de sus propios diseños. Todo esto es a través del archivo gatsby-plugin-mdx y funciona muy bien.
Sin embargo, estoy tratando de hacer que la navegación de nivel superior se destaque como activa cuando un usuario navega a una subpágina en esa sección. Estoy usando el código de los documentos de Gatsby y funciona en las páginas que creé como archivos JS normales.
Ejemplo:
<Link partiallyActive={true} activeClassName="header-nav-active" to={menu.url} title={menu.title}> {menu.label} </Link>Parece que no parece funcionar para las páginas MDX, aunque lo que se representa en location.pathname es lo mismo. Mi estructura actual es:
src -pages --section ----section-subpage.js --other section ----other-section-sub -----index.mdx ----other-section-sub-2 -----index.mdxEn última instancia, si observa este diseño, me gustaría que "Figma" se resalte como activo cuando navegue por las subpáginas de esa sección.
1 answers
Answer question0
¿Has intentado usar la función de ayuda getProps ? Debido a que el enrutador de Gatsby se extiende desde el de React ( @reach/router ), puede aprovechar los props avanzados para personalizar su estilo
Puede crear un enlace partiallyActive activo como:
const isPartiallyActive = ({ isPartiallyCurrent }) => { return isPartiallyCurrent ? { className: 'navlink-active navlink' } : { className: 'navlink' } } const PartialNavLink = props => ( <Link getProps={isPartiallyActive} {...props}> {props.children} </Link> )Y luego simplemente use:
<PartialNavLink to="/figma">Figma</PartialNavLink>O de una manera no refinada:
<Link getProps={({ isPartiallyCurrent }) => isPartiallyCurrent ? { className: "active" } : null } to={"/figma"}> Figma </Link>