带有 nextjs 的 material-ui 选项卡? [英] material-ui tabs with nextjs?

问题描述

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

I have a project in material-ui, nextjs and typescript. I'm trying to get my navbar to work with 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>
  );
}

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

But it causes the build to fail. Is there something I'm missing?

推荐答案

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

In this case, I believe you want to wrap the <Tab /> elements with the <Link /> ones.

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

这篇关于带有 nextjs 的 material-ui 选项卡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！