• 0

material-ui tabs مع nextjs?

لدي مشروع في material-ui ، nextjs. أحاول جعل شريط التنقل الخاص بي يعمل مع 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>
  );
}

لكنه يتسبب في فشل البناء. هل هناك شيء مفقود؟

2 اشخاص أعجبوا بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 1

في هذه الحالة تريد ان تضع عناصر <Tab /> بداخل العنصر <Link /> كالتالي

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

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 1

كما أجاب محمد، وأيضاً قد يكون الكود التالي جيداً لتحسين محركات البحث:

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

حيث أن Link لاتضيف href للابن حتى لو كان مكوناً. و passHref يفرض هذا، ولكن لا يمكن وضع منع PreventionDefault في onClick كما هو مذكور في توثيق MUI لأنه لن يغير عنوان URL.

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن