MUI MenuItem NextJS链接：使用这些组件时出错

kyxcudwk 于 2023-08-04 发布在其他

关注(0)|答案(2)|浏览(129)

尝试使用MUI MenuItem和NEXTJS 13 Link时出现问题。版本：MUi：“@mui/material”：“^5.13.5”，NEXTJS：“next”：“13.4.5”，
从“@mui/material/MenuItem”导入MenuItem;从“next/link”导入{ Link };
https://mui.com/material-ui/react-app-bar/
我试过了：A）

<Link href={`/main`}>
  <a>
    <MenuItem key={1}>lorem</MenuItem>
  </a>
</Link>

字符串
显示错误：未处理的运行时错误TypeError：无法读取undefined的属性（阅读“muiSkipListHighlight”）
B）

<MenuItem key={1}>
 <Link href={`/main`}>
   lorem
 </Link>
</MenuItem>

型
显示错误：错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。检查ResponsiveAppBar的渲染方法。（ResponsiveAppBar是我正在创建的组件）
C）

function ALink() {
    return <Link href="/">lorem</Link>;
}

型
……

<MenuItem key={1} component={ALink()>
</MenuItem>

型
显示错误：错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。检查MuiButtonBaseRoot的渲染方法。
D）只是不知道该尝试什么，我添加了一个insie链接：

<MenuItem key={1}>
 <Link href={`/main`}>
   <a>lorem</a>
 </Link>
</MenuItem>

型
显示错误：错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。
如果我退出链接，它会正常工作。但这不是我们所期望的。

<MenuItem key={1}>
  {/* <Link href={`/main`}>asd</Link> */}
  lorem
</MenuItem>

型
谢谢你，
编辑：我已经用一个解决方案来回答这个问题，但是当我需要使用一个链接来滚动同一个页面时，我遇到了这个问题。（答案并不正确，因为这一点）

next.js

来源：https://stackoverflow.com/questions/76695327/mui-menuitem-nextjs-link-error-while-using-those-components

2条答案

按热度按时间

nuypyhwy1#

如果有人遇到了同样的问题，它会有所帮助：
使用userouter并在onclick事件中推送站点。

import { useRouter } from "next/navigation";

const router = useRouter();
  function move() {
    router.push("/main");
  }

<MenuItem key={1} onClick={(event) => move()}>
  Lorem
</MenuItem>

赞(0）回复(0）举报 2023-08-04

unhi4e5o2#

开箱即用的解决方案。而不是使用链接，我使用了一个按钮，然后onclick功能为这个问题。当MenuItem具有pageScroll = true的参数时，它将调用onBtnClickDirect函数（以及作为参数传递的URL）。

function move(url, pageScroll = null) {
    if (pageScroll !== true) {
      router.push(url);
    } else {
      onBtnClickDirect(url);
    }
  }

字符串
其他使用的功能：

const onBtnClickDirect = (goToRef) => {
  const goto = goToRef;
  setTimeout(() => {
    scroll2El(goto);
  }, 100);
};
const scroll2El = (elID) => {
  window.scrollTo({
    top: document.getElementById(elID).offsetTop,
    behavior: "smooth",
  });
};

型
因此，到目前为止，您可以为同一问题提供两种选择。
我希望它能帮助某人。

赞(0）回复(0）举报 2023-08-04

我来回答

MUI MenuItem NextJS链接：使用这些组件时出错

2条答案

相关问题

热门标签

最新问答