带有 nextjs 的 material-ui 选项卡？答案

【问题标题】：material-ui tabs with nextjs?带有 nextjs 的 material-ui 选项卡？
【发布时间】：2021-04-04 20:25:10
【问题描述】：

我在 material-ui、nextjs 和 typescript 中有一个项目。我正在尝试让我的导航栏与 nextjs 一起使用：

import * as React from 'react';
import AppBar from '@material-ui/core/AppBar';
import Link from "next/link";
import {Tab, Tabs} from "@material-ui/core";

export default function NavBar() {
  return (
        <AppBar position="static">
          <Tabs>
              <Tab label="Timer"><Link href="timer" /> </Tab>
              <Tab label="Home" to="/" component={Link}  />
          </Tabs>
        </AppBar>
  );
}

但它会导致构建失败。我有什么遗漏吗？

【问题讨论】：

如果构建失败，错误信息是什么？

标签： javascript reactjs material-ui next.js

【解决方案1】：

在这种情况下，我相信您想用 <Link /> 包装 <Tab /> 元素。

<Tabs>
    <Link href="/timer" passHref>
      <Tab label="Timer" />
    </Link>
    <Link href="/" passHref>
      <Tab label="Home" />
    </Link>
</Tabs>

【讨论】：

【解决方案2】：

这可能对 SEO 更好：

<Link href="/timer" passHref>
  <Tab component="a" label="Timer" />
</Link>

原因是因为Link 没有将href 添加到孩子（即使它是a 组件）。 passHref 强制执行此操作，但 preventDefault 不能像 MUI docs 中提到的那样放置 onClick，因为它不会更改 URL。

【讨论】：

【解决方案3】：

这是一个直接来自 MUI v.5 的示例。

https://codesandbox.io/s/d2dco?file=/demo.tsx

创建 LinkTab 组件：

import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';

interface LinkTabProps {
  label?: string;
  href?: string;
}

function LinkTab(props: LinkTabProps) {
  return (
    <Tab
      component="a"
      onClick={(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
        event.preventDefault();
      }}
      {...props}
    />
  );
}

用法：

   <LinkTab label="register" href="/register" />
   <LinkTab label="login" href="/login" />

但说实话<Tab label="login" href="/login" /> 对我有用

【讨论】：

不过，这并没有解决 OP 将 Material UI 的 <Tab> 与 Next.js 的 <Link> 组件一起使用的问题。
@juliomalves OP 的问题是“导航不工作”。我的示例使用 Next.js 进行导航，没有 <Link> 组件。
当然，但使用next/link 是有原因的，它允许正确的客户端导航而无需重新加载整个页面。