reactjs - 如何使用 Tabs 作为链接组件创建 AppBar？

Question

我想在使用 Next.js 及其组件时使用 Material-UITabs和组件。TabAppBarLink

非常示意性地，这是我尝试过的：

import AppBar from '@mui/material/AppBar';
import Tab from '@mui/material/Tab';
import Tabs from '@mui/material/Tabs';
import { useState } from 'react';

const Navbar = () => {
  const [selectedTab, setSelectedTab] = useState(0);

  const handleTabChange = (event, newValue) => {
    setSelectedTab(newValue);
  };

  return (
    <AppBar position="static">
      <Tabs value={selectedTab} onChange={handleTabChange} indicatorColor="secondary">
        <Tab label="Album" />
        <Tab label="Profile" />
      </Tabs>
    </AppBar>
  )
}

指示器（下划线）和活动类以这种方式工作，但我正在努力使用 Next.jsLink组件，同时保持它们的功能。

我尝试按照这里的建议包装Tab组件，如下所示：Link

import AppBar from '@mui/material/AppBar';
import Tab from '@mui/material/Tab';
import Tabs from '@mui/material/Tabs';
import Link from 'next/link';
import { useState } from 'react';

const Navbar = () => {
  const [selectedTab, setSelectedTab] = useState(0);

  const handleTabChange = (event, newValue) => {
    setSelectedTab(newValue);
  };

  return (
    <AppBar position="static">
      <Tabs value={selectedTab} onChange={handleTabChange} indicatorColor="secondary">
        <Link href="/album" passHref>
          <Tab label="Album" />
        </Link>
        <Link href="/profile" passHref>
          <Tab label="Profile" />
        </Link>
      </Tabs>
    </AppBar>
  )
}

这可以重定向我，但指示器和活动类都停止工作。

如何同时使用Linknext.js 中的组件，同时保留TabsMUI 中组件的所有活动突出显示功能？

标签： reactjsmaterial-uinext.js