带有 nextjs 的 Material-ui 选项卡？

Question

我有一个 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>
  );
}

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

Answer 1

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

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