带有 nextjs 的 material-ui 选项卡？

Posted 2023-02-22

【中文标题】带有 nextjs 的 material-ui 选项卡？

【英文标题】：material-ui tabs with nextjs?

【发布时间】：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>
  );

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

【问题讨论】：

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

【参考方案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 是有原因的，它允许正确的客户端导航而无需重新加载整个页面。