带有nextjs的material-ui选项卡？

IT技术 javascript reactjs material-ui next.js
2021-05-11 12:30:23

我在 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>
  );
}

但它会导致构建失败。有什么我想念的吗？

3个回答

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

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

这可能对 SEO 更好：

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

原因是因为Link不会添加href到孩子（即使它是一个a组件）。passHref强制这样做，但preventDefault不能onClick像MUI 文档中提到的那样放置，因为它不会更改 URL。

这是直接来自 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" />只对我有用

其它你可能感兴趣的问题
上一篇不断让 [WDS] 断开连接！错误，ReactJs，Webpack 下一篇从 ReactNative 中的 StyleSheet.create 访问状态值