كيف أجعل روابط شريط التنقل Tabs في material-ui تعمل مع nextjs

عبد النور محمد · 9 سبتمبر 2021

لدي مشروع في 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>
  );
}

لكن عملية بناء المشروع تفشل ؟

تم التعديل في 10 سبتمبر 2021 بواسطة Wael Aljamal
توضيح السؤال

Wael Aljamal · 9 سبتمبر 2021

يمكن استخادم الخاصية containerElement للعنصر Tab أي سيتم إحاطة Tab بعنصر Link ويمكن تطبيقها كالتالي

<Tabs onChange={this.changeTab} value={value}>
   <Tab label="timer"  containerElement={<Link to="/timer" />} />
   <Tab label="Home"   containerElement={<Link to="/Home"  />} />
 </Tabs>

كما يمكن إضافة Link كخاصية component :

 <Tab label='Home'  to='/Home' component={Link} />

محمد أبو عواد · 9 سبتمبر 2021

في هذه الحالة ،يجب وضع عناصر Link بداخل عنصر Tabs كالتالي

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

Ali Haidar Ahmad · 9 سبتمبر 2021

أيضاً قد يكون الحل التالي أفضل لل SEO:

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

حيث أن Link لايضيف href لل child. يقوم passHref بفرض هذا، لكن preventDefault لايمكن وضعه onClick لأنه لن يغير عنوان URL.

تم التعديل في 9 سبتمبر 2021 بواسطة Ali Haidar Ahmad

كيف أجعل روابط شريط التنقل Tabs في material-ui تعمل مع nextjs

السؤال

عبد النور محمد

رابط هذا التعليق

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

3 أجوبة على هذا السؤال

Recommended Posts

Wael Aljamal

رابط هذا التعليق

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

محمد أبو عواد

رابط هذا التعليق

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

Ali Haidar Ahmad

رابط هذا التعليق

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

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية