Estoy haciendo mi cartera de sitios web y he creado un componente de Navbar de navegación con enlaces a la página de inicio, la página del proyecto y la página del blog. La página de inicio y la página del blog son enlaces internos, mientras que el enlace de proyectos es un enlace externo.
Ahora la forma en que tengo esta configuración es así:
import * as React from 'react'; import { Link, useStaticQuery, graphql } from 'gatsby'; import Icon from '../images/icon.svg'; const Navbar = ({pageTitle}) => { const data = useStaticQuery(graphql` query { site { siteMetadata { title } } } `); const menu = [ { title: 'HOME', path:'/' }, { title: 'PRØJECTS', path: 'https://github.com/chukkyiii?tab=repositories' }, { title: 'BLØG', path: '/blog' } ] return ( <main> <title> {pageTitle} | {data.site.siteMetadata.title} </title> <div> <div className="mx-auto mb-9 flex items-center justify-between max-w-2xl "> <Icon className="w-12 h-12 p-1 rounded-full ring-2 ring-gray-300 dark:ring-gray-500" /> <nav> <ul className="flex"> {menu.map((item) => ( <li key={item.title}> <Link to={item.path} className="pl-8 hover:text-amber-500"> {item.title} </Link> </li> ))} </ul> </nav> </div> </div> </main> ); } export default Navbar; Así que no tengo que repetir la misma línea de código nuevamente, solo usé un Link que funciona pero me da una advertencia, ¿hay alguna otra forma en que pueda hacer esto sin la advertencia?
la advertencia que da:
react_devtools_backend.js:4026 External link https://github.com/chukkyiii?tab=repositories was detected in a Link component. Use the Link component only for internal links. See: https://gatsby.dev/internal-links ...Puede personalizar fácilmente su matriz de menu para mostrar una nueva propiedad en la que basar su ciclo:
const menu = [ { title: 'HOME', path:'/', isInternal: true }, { title: 'PRØJECTS', path: 'https://github.com/chukkyiii?tab=repositories', isInternal: false }, { title: 'BLØG', path: '/blog', true } ]Después:
{ menu.map((item) => { if (item.isInternal) { return ( <li key={item.title}> <Link to={item.path} className="pl-8 hover:text-amber-500"> {item.title} </Link> </li> ); } return ( <li key={item.title}> <a href={item.path} target="_blank"> {item.title} </a> <li key={item.title}> ); }); } Incluso puedes hacer una condición ternaria dentro del retorno para aprovechar el envoltorio <li> :
{ menu.map((item) => ( <li key={item.title}> {item.isInternal ? ( <Link to={item.path} className="pl-8 hover:text-amber-500"> {item.title} </Link> ) : ( <a href={item.path} target="_blank"> {item.title} </a> )} </li> )); } El componente de Link está destinado a usarse solo para la navegación interna, algo de lo que sucede en el ámbito de su aplicación y React/Gatsby puede estar al tanto. Si el enlace apunta a cualquier fuente externa (como GitHub en este caso), debe usar el ancla estándar (que de hecho es lo que representa el componente Link ).
El mismo enfoque de agregar el atributo isInternal (que personalmente lo encuentro más breve) se puede hacer de la misma manera usando una expresión regular o similar, solo verificando cómo es la path .