2
votes

Comment utiliser le composant Next.js Link (next / link) dans un menu Material UI?

J'ai un menu Material ui de la manière suivante:

<MenuItem onClick={handleClose} component={<Link href={'#'}>Log Out</Link>}></MenuItem>

et que vous souhaitez utiliser les balises next.js Link avec le MenuItem . Quelle est la meilleure façon de procéder?

J'ai essayé les choses suivantes:

Ce qui suit ne rend pas la balise <a> , mais ajoute href à la <li> .

<Link href={'#'} passHref><MenuItem onClick={handleClose}>Log Out</MenuItem></Link>

Je pourrais ajouter un accessoire à MenuItem pour rendre <a> au lieu de la <li> , cependant, puisque le menu est imbriqué sous la <ul> , je ne suis pas sûr d'avoir <ul><a>Log Out</a></ul> est une bonne idée

Ce qui suit génère une erreur

<Menu id="simple-menu" anchorEl={anchorEl} keepMounted open={!!anchorEl} onClose={handleClose}>
    <MenuItem onClick={handleClose}>Profile</MenuItem>
    <MenuItem onClick={handleClose}>Log Out</MenuItem>
</Menu>

Erreur: le type d'élément n'est pas valide: attendait une chaîne (pour les composants intégrés) ou une classe / fonction (pour les composants composites) mais obtenu: objet.

reactjs material-ui next.js

0 commentaires

5 Réponses :

1
votes

Vous pouvez mettre le composant "Link" dans le composant "MenuItem".

<MenuItem><Link href="#">Log Out</Link></MenuItem>

2 commentaires

Cela semble fonctionner, mais j'obtiens le lien bleu régulier avec soulignement dans le menu. Je pense que cela remplace les styles? savez-vous si je peux conserver le style du menuitem?

@Arximede, vous pouvez changer les styles ou changer l'élément rendu par le composant "Link".

0
votes

Ajouter une balise à l'intérieur du lien

<MenuItem onClick={handleClose} component={<Link href={'#'}><a>Log Out</a></Link>}></MenuItem>

1 commentaires

J'obtiens une erreur: Erreur: le type d'élément n'est pas valide: attendait une chaîne (pour les composants intégrés) ou une classe / fonction (pour les composants composites) mais obtenu: objet.

0
votes

Voir si le code ci-dessous corrige ce problème, Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object :

const ALink = ({ url, linkText }) => <Link href={url}>
    <a>{ linkText }</a>
</Link>    
<MenuItem onClick={handleClose} component={ ALink({url: '#', linkText: 'Log Out') }></MenuItem>

0 commentaires

3
votes

Comme mentionné dans l'autre réponse, donner la balise Link dans la balise MenuItem fonctionnera comme requis et pour les problèmes de style, vous devez donner un textDecoration: 'none' et color: '#000' dans la balise Link pour éviter le soulignement et le bleu couleur du texte du Link .

<MenuItem>
   <Link 
      style={{
          textDecoration: 'none', 
          color: '#000'
      }}
      href="#"
   >
    Log Out
   </Link>
</MenuItem>

0 commentaires

0
votes

Le composant prop à l'intérieur de <MenuItem> est The component used for the root node. Either a string to use a HTML element or a component. qui fait défaut à <li> comme le dit un officiel de Material-ui.

Si vous souhaitez conserver la structure <ul><li></li></ul> , vous devez imbriquer votre composant <Link> intérieur du composant <MenuItem> .

Alors c'est peut-être ce que vous vouliez.

<MenuItem onClick={handleClose}>
  <Link href={'#'}>Log Out</Link>
</MenuItem>

0 commentaires