كيف أجعل روابط شريط التنقل 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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية