J'ai créer un composant bouton dans mon projet react qui renverra soit vers un lien interne ou externe suivant l'utilité dans mon site.
import React from 'react';
import Link from 'next/link'; // Importation du Link de Next.js
import styles from '../styles/BoutonLien.module.css';
const BoutonLien = ({ lien, texte }) => {
// Vérifie si le lien est défini et s'il commence par un slash pour déterminer si c'est un lien interne
if (!lien) {
console.error('La prop "lien" est requise.');
return null; // Tu peux afficher un message d'erreur ou un bouton désactivé ici si nécessaire
}
const isInternalLink = lien.startsWith("/"); // Vérifie si le lien est interne (commence par "/")
return isInternalLink ? (
<Link href={lien} className={styles.boutonLien}>
{texte}
</Link>
) : (
<a href={lien} className={styles.boutonLien} target="_blank" rel="noopener noreferrer"> {/* Pour les liens externes */}
{texte}
</a>
);
};
export default BoutonLien;
je pense que la remarque de gcyrillus est tout à fait pertinente. Si tu écris du HTML, tu utilises les attributs du HTML (donc, pas className).
Ceci dit,
as-tu vraiment besoin de forcer l'ouverture d'un nouvel onglet ? Le fait de vouloir garder les gens sur son site a été maintes fois débunké, par exemple sur Nielsen Norman.
pourquoi pas ajouter le target et le rel en conditionnel sur ton Link de React ? Qu'est-ce qui t'en empêche ?
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Bouton React
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
fan de PluXml , cuisinier et codeur amateur.Thèmes pour PluXml ? Oui Des plugins? Oui
Pas d'aide concernant le code par MP, le forum est là pour ça :)