0

Estoy usando el compnente Link de next para redirigir a otras paginas pero cuando hago click recarga la pagina completamnete segun la documentacion de next es de la siguiente manera como se usa

<Link href='/ruta'>
   <a>Contenido</a>
</Link>

Yo las rutas y el contendo lo tengo en un array para recorrerlo

export const Navheader = [
    {
        id: 1,
        title: 'home',
        link: '/',
    },
    {
        id: 2,
        title: 'laptops',
        link: '/detailPage',
    },
    {
        id: 3,
        title: 'delivery',
        link: '/deliveryPage',
    },

    {
        id: 4,
        title: 'legal active',
        link: '/legalPage',
    },
    {
        id: 5,
        title: 'secure payment',
        link: '/paymentPage',
    },
    
];

un componente con props del array

import PropTypes from 'prop-types';
import { useRouter } from 'next/router';
import Link from 'next/link';

const Navitems = ({ navbar }) => {
    const router = useRouter();
    return (
        <>
            <li className='nav-items'>
                <Link href={navbar.link}>
                    <a
                        className={
                            router.pathname == navbar.link
                                ? ' nav-links active'
                                : ' nav-links'
                        }
                    >
                        {navbar.title}
                    </a>
                </Link>
            </li>
        </>
    );
};
Navitems.propTypes = {
    navbar: PropTypes.array.isRequired,
}
export default Navitems;

Y en la navegacion finalmente con mi array

 {Navheader.map((navbar) => (
   <Navitems key={navbar.id} navbar={navbar} />
  ))}

Tambien tengo botones mas sencilos donde pasa lo mismo

<Link href="/login">
    <a>Iniciar Seción</a>
  </Link>
 <Link href="/crearcuenta">
   <a >Crear Cuenta</a>
 </Link>

Quite el / que fue una de las cosas que vi en una pregunta similar pero no funciono si alguien sabe porque pasa esto le agredecere su ayuda

1 respuesta 1

0

No tengo tanta experiencia en Next, pero vi mucho relacionado a esto. Intenta

<Link href='/[link]' as={`/${navbar.link}`}>
  <a
     className={
       router.pathname == navbar.link
         ? ' nav-links active'
         : ' nav-links'
     }
  >
     {navbar.title}
  </a>
</Link>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.