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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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