عبد النور محمد نشر 4 سبتمبر 2021 أرسل تقرير مشاركة نشر 4 سبتمبر 2021 كيف نستهدف الرابط النشط في Next.js مثل الطريقة التي نقوم بها في React-Router؟ بمعنى ، أعطي الرابط النشط class عندما يكون مساره نشطًا؟ 2 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عبدالباسط ابراهيم نشر 4 سبتمبر 2021 أرسل تقرير مشاركة نشر 4 سبتمبر 2021 يمكنك استخدام ال hook التالي " useRouter " كما في المثال التالي import Link from "next/link"; import { useRouter } from "next/router"; export const MyNav = () => { const router = useRouter(); return ( <ul> <li className={router.pathname == "/" ? "active" : ""}> <Link href="/">home</Link> </li> <li className={router.pathname == "/about" ? "active" : ""}> <Link href="/about">about</Link> </li> </ul> ); }; اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمد أبو عواد نشر 4 سبتمبر 2021 أرسل تقرير مشاركة نشر 4 سبتمبر 2021 بداية يجب أن يكون لديك مكون يسمى Link ، مع خاصية activeClassName import { useRouter } from 'next/router' import PropTypes from 'prop-types' import Link from 'next/link' import React, { Children } from 'react' const ActiveLink = ({ children, activeClassName, ...props }) => { const { asPath } = useRouter() const child = Children.only(children) const childClassName = child.props.className || '' // pages/index.js will be matched via props.href // pages/about.js will be matched via props.href // pages/[slug].js will be matched via props.as const className = asPath === props.href || asPath === props.as ? `${childClassName} ${activeClassName}`.trim() : childClassName return ( <Link {...props}> {React.cloneElement(child, { className: className || null, })} </Link> ) } ActiveLink.propTypes = { activeClassName: PropTypes.string.isRequired, } export default ActiveLink ثم يكون لديك شريط تنقل به ارتباط مكون تم إنشاؤه ومحدد css :active للتمييز بين الارتباط النشط وغير النشط. import ActiveLink from './ActiveLink' const Nav = () => ( <nav> <style jsx>{` .nav-link { text-decoration: none; } .active:after { content: ' (current page)'; } `}</style> <ul className="nav"> <li> <ActiveLink activeClassName="active" href="/"> <a className="nav-link">Home</a> </ActiveLink> </li> <li> <ActiveLink activeClassName="active" href="/about"> <a className="nav-link">About</a> </ActiveLink> </li> <li> <ActiveLink activeClassName="active" href="/[slug]" as="/dynamic-route"> <a className="nav-link">Dynamic Route</a> </ActiveLink> </li> </ul> </nav> ) export default Nav بعد ذلك يمكنك تنفيذ شريط التنقل على صفحتك: import Nav from '../components/Nav' export default () => ( <div> <Nav /> <p>Hello, I'm the home page</p> </div> ) ما يحدث تماما داخل مكون link ،هو أنن نقارن قيمة router.pathname بالسمة href الخاصة ب link، إذا كانت القيمتان متطابقتان ، نقوم بوضع className المحدد لجعل الرابط يبدو نشطا. اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
عبد النور محمد
كيف نستهدف الرابط النشط في Next.js مثل الطريقة التي نقوم بها في React-Router؟ بمعنى ، أعطي الرابط النشط class عندما يكون مساره نشطًا؟
رابط هذا التعليق
شارك على الشبكات الإجتماعية
2 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.