می دانم به چه فکر می کنید، اما با وجود عنوان مقاله و تصویر جلد، این مقاله در مورد نان یا حتی شیرینی نیست. درعوض، به مؤلفه‌ای که معمولاً در برنامه‌های کاربردی وب برای ناوبری استفاده می‌شود، به نام کامپوننت breadcrumb نگاه می‌کند.

در اینجا، ما اسرار مسیرهای خرده نان را در برنامه‌های React کشف می‌کنیم، انواع آن‌ها را تشریح می‌کنیم و یاد می‌گیریم که چگونه آن‌ها را به طور یکپارچه در پروژه‌های وب خود برای ناوبری پیشرفته کاربر ادغام کنیم.

پیش نیازها

مبانی CSS و TailwindCSS

مبانی ES6 JavaScript و React

اصول مسیریابی و کتابخانه React Router (اگر آشنایی ندارید، این مقاله مسیریابی را تحلیل کنید).

آنچه را پوشش خواهیم داد:

درک Breadcrumbs

انواع ناوبری Breadcrumb

چگونه کامپوننت Breadcrumb را در React بسازیم

نحوه ایجاد ساختار اجزای Breadcrumb
- نان بر اساس مکان
- خرده نان های مبتنی بر مسیر
- Breadcrumbs مبتنی بر ویژگی

بهترین روش ها برای Breadcrumbs در React

نتیجه

درک Breadcrumbs

قبل از اینکه بیشتر به پیچیدگی‌های پودر سوخاری بپردازیم، بیایید صحنه را تنظیم کنیم. داستان کلاسیک هانسل و گرتل را تصور کنید، جایی که آنها ردی از پودر سوخاری را برای یافتن راه بازگشت به خانه از طریق جنگل انبوه ترک می کنند.

در قلمرو دیجیتال، پودر سوخاری هدف مشابهی را دنبال می‌کند، البته با تغییر.

Breadcrumbs، در زمینه ناوبری وب، مجموعه ای از پیوندهای سلسله مراتبی هستند که معمولاً در بالای صفحه وب نمایش داده می شوند. این پیوندها مسیر کاربر را از صفحه اصلی به صفحه فعلی منعکس می کند و به آنها اجازه می دهد مراحل خود را دوباره دنبال کنند یا به صفحات سطح بالاتر حرکت کنند.

این کمک های ناوبری تاریخچه ای جذاب و نقش مهمی در هدایت کاربران در فضای دیجیتال دارند.

یک مثال معمولی از ظاهر این مؤلفه در زیر نشان داده شده است:

انواع ناوبری Breadcrumb

Breadcrumbs مبتنی بر مکان : مانند نقاط عطف در یک جنگل، سوخاری های مبتنی بر مکان به کاربران نشان می دهد که کجا در سلسله مراتب وب سایت قرار دارند. آنها موقعیت صفحه فعلی را نسبت به سایر صفحات سایت نشان می دهند.

Breadcrumbs مبتنی بر مسیر : مانند بازیابی مراحل خود در جنگل، سوخاری های مبتنی بر مسیر، سفر کاربر را در وب سایت نشان می دهند. آنها توالی صفحات بازدید شده را نشان می دهند و به کاربران کمک می کنند بفهمند چگونه به صفحه فعلی رسیده اند.

Breadcrumbs مبتنی بر ویژگی : این پودرهای سوخاری ویژگی ها یا ویژگی های خاص صفحه فعلی را برجسته می کنند. آنها زمینه بیشتری را به ناوبری کاربر ارائه می دهند، شبیه به کشف ویژگی های منحصر به فرد در طول یک مسیر.

چگونه کامپوننت Breadcrumb را در React بسازیم

اولین مرحله در این بخش شامل ایجاد یک محیط React است. قبل از شروع، مطمئن شوید که Node.js را در رایانه خود نصب کرده اید، اگر قبلاً آن را ندارید.

نحوه راه اندازی یک محیط React

پس از نصب Node.js، از Vite (ابزار ساخت مدرن برای پروژه های React) برای ایجاد یک پروژه جدید React استفاده کنید. در ترمینال محلی خود، دستور را اجرا کنید:

 npm create vite@latest

React را به عنوان فریمورک و نوع دلخواه خود انتخاب کنید.

برای نصب بسته های لازم، npm install اجرا کرده و در IDE خود باز کنید.

در نهایت، کد boilerplate را پاک کنید و سرور خود را با استفاده از دستور npm run dev راه اندازی کنید.

این پروژه از Tailwind برای یک ظاهر طراحی استفاده می کند. برای تنظیم آن، دستور زیر را اجرا کنید:

 npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p

بعد از این دستور یک فایل tailwind.config.js ایجاد می شود. به فایل کانفیگ بروید، محتوای آن را حذف کنید و به جای آن این را در آنجا قرار دهید:

 /** @type {import('tailwindcss').Config} */ export default { content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], }

سپس، فایل index.css خود را باز کنید و تنظیمات استایل را (ترجیحا در بالا) قرار دهید:

 @tailwind base; @tailwind components; @tailwind utilities;

در نهایت، سرور توسعه دهنده خود را مجددا راه اندازی کنید تا به Tailwind دسترسی پیدا کنید.

نحوه ایجاد ساختار اجزای Breadcrumb

به جای ساختن یک جزء خرده نان، ما قصد داریم هر سه نوع ذکر شده در بالا را بسازیم تا بتوانید نحوه کار آنها را ببینید.

Breadcrumbs مبتنی بر مکان

این نوع ابتدایی ترین نوع پودر سوخاری است که شامل نشان دادن تمام مسیرهایی است که به راحتی برای پیمایش کاربر در دسترس است.

برای شروع، با ایجاد یک فایل Breadcrumb و چسباندن در این سبک ها شروع کنید:

 import SlashImg from "./assets/slash.png"; export default function Breadcrumb() { return ( <div className="bg-white "> <ul className=" flex border p-2 gap-6 text-xl text-[#2E4053] items-center"> <li className=" cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md"> Home </li> <img src={SlashImg} className="w-5 h-5 " alt="" /> <li className=" cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md transition-all duration-300"> Products </li> <img src={SlashImg} className="w-5 h-5 " alt="" /> <li className=" cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md transition-all duration-300"> About </li> <img src={SlashImg} className="w-5 h-5 " alt="" /> <li className=" cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md transition-all duration-300"> FAQ </li> </ul> </div> ); }

سپس این فایل را به یک مؤلفه Home وارد کنید که باید آن را نیز ایجاد کنید:

 import Breadcrumb from "./Breadcrumb"; export default function Home() { return ( <div className=" h-[100dvh] bg-gray-200"> <div className="flex flex-col items-center gap-8 "> <h1 className=" text-4xl text-[#2E4053 ] mt-20"> My Breadcrumb Component 🍞 </h1> <Breadcrumb /> </div> </div> ); }

در حال حاضر، کامپوننت شما به شکل زیر است:

برای انجام عملکردهای ناوبری با این مؤلفه، با نصب React Router (کتابخانه ای پرکاربرد برای مدیریت ناوبری و مسیریابی در برنامه های React) شروع کنید.

 npm i react-router-dom

سپس مسیرها را در مؤلفه App خود ایجاد کنید.

 import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom"; import About from "./About"; import FAQ from "./FAQ"; import Home from "./Home"; import Homepage from "./Homepage"; import Products from "./Products"; export default function App() { return ( <BrowserRouter> <Routes> <Route index element={<Navigate replace to="home" />} /> <Route path="/" element={<Home />}> <Route path="home" element={<Homepage />} /> <Route path="products" element={<Products />} /> <Route path="about" element={<About />} /> <Route path="faq" element={<FAQ />} /> </Route> </Routes> </BrowserRouter> ); }

بلوک کد بالا پیکربندی برای مسیریابی سمت مشتری در یک برنامه React با استفاده از React Router v6 است. یک BrowserRouter را برای مدیریت مسیریابی پویا راه‌اندازی می‌کند و مجموعه‌ای از مؤلفه‌های مسیر را در Routes تعریف می‌کند تا مسیرهای URL را به مؤلفه‌های React ترسیم کند.

BrowserRouter یک پیاده سازی روتر است که از API تاریخچه HTML5 برای همگام نگه داشتن UI با URL استفاده می کند.

Navigate کاربران را به یک مسیر خاص هدایت می کند. در این مورد، از مسیر فهرست به /home هدایت می شود.

اجزای Route یک نگاشت بین یک مسیر و یک جزء را تعریف می کنند. element prop مشخص می کند که وقتی مسیر با URL فعلی مطابقت دارد، چه چیزی ارائه شود.

path="/" element={<Home />} یک مسیر تودرتو است که به عنوان یک طرح برای مسیرهای فرزند خود عمل می کند. هنگامی که URL / است مؤلفه Home را ارائه می دهد. در داخل مسیر Home مسیرهایی برای home ، products ، about ، و faq وجود دارد که هر کدام اجزای مربوطه خود را زمانی که مسیرشان با URL مطابقت دارد، ارائه می‌کند.

سپس به کامپوننت Breadcrumb خود بروید و عناصر فهرست را به عناصر Link (وارد شده از React Router) تغییر دهید تا به مسیریابی بین مسیرها کمک کنید.

 import { Link } from "react-router-dom"; import SlashImg from "./assets/slash.png"; export default function Breadcrumb() { return ( <div className="bg-white "> <ul className=" flex border p-2 gap-6 text-xl text-[#2E4053] items-center"> <Link to={"home"} className=" cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md"> Home </Link> <img src={SlashImg} className="w-5 h-5 " alt="" /> <Link to={"products"} className=" cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md transition-all duration-300"> Products </Link> <img src={SlashImg} className="w-5 h-5 " alt="" /> <Link to={"about"} className=" cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md transition-all duration-300"> About </Link> <img src={SlashImg} className="w-5 h-5 " alt="" /> <Link to={"faq"} className=" cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md transition-all duration-300"> FAQ </Link> </ul> </div> ); }

سپس از کامپوننت Outlet ارائه شده توسط React Router برای نمایش محتوای هر مسیر در کامپوننت Home استفاده کنید.

 import Breadcrumb from "./Breadcrumb"; import { Outlet } from "react-router-dom"; export default function Home() { return ( <div className=" h-[100dvh] bg-gray-200"> <div className="flex flex-col items-center gap-8 "> <h1 className=" text-4xl text-[#2E4053 ] mt-20"> My Breadcrumb Component 🍞 </h1> <Breadcrumb /> <Outlet /> </div> </div> ); }

اکنون با آزمایش کامپوننت خود در مرورگر، نتیجه زیر به دست می آید:

با این کار، پودر سوخاری مبتنی بر مکان شما کاربردی است، اما ما می‌توانیم آن را یک قدم جلوتر ببریم. برای بهبود UX، می‌توانیم یک کلاس فعال به مسیر فعال فعلی اضافه کنیم و یک نشانگر بصری از جایی که کاربر در هر نقطه از زمان است ایجاد کنیم.

با استخراج مکان فعلی کاربر در جزء Breadcrumb شروع کنید:

 const location = useLocation();

سپس از ویژگی pathname برای اضافه کردن یک کلاس فعال به هر پیوند استفاده کنید:

 import { Link, useLocation } from "react-router-dom"; import SlashImg from "./assets/slash.png"; export default function Breadcrumb() { const location = useLocation(); console.log(location.pathname); return ( <div className="bg-white "> <ul className=" flex border p-2 gap-6 text-xl text-[#2E4053] items-center"> <Link to={"home"} className={`cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md ${ location.pathname === "/home" && "bg-[#b572d6] text-white" }`}> Home </Link> <img src={SlashImg} className="w-5 h-5 " alt="" /> <Link to={"products"} className={`cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md ${ location.pathname === "/products" && "bg-[#b572d6] text-white" }`}> Products </Link> <img src={SlashImg} className="w-5 h-5 " alt="" /> <Link to={"about"} className={`cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md ${ location.pathname === "/about" && "bg-[#b572d6] text-white" }`}> About </Link> <img src={SlashImg} className="w-5 h-5 " alt="" /> <Link to={"faq"} className={`cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md ${ location.pathname === "/faq" && "bg-[#b572d6] text-white" }`}> FAQ </Link> </ul> </div> ); }

اکنون این نتیجه زیر را می دهد:

گفت ن-یک-کلاس-اکتیو" width="600" height="276" loading="lazy">

خوش طعم! 🍩

Breadcrumbs مبتنی بر مسیر

این نوع پودر سوخاری از الگوی آشکارسازی پیشرونده استفاده می‌کند تا کاربران را در جایی که براساس اقداماتشان بهتر راهنمایی کند.

در اینجا قصد داریم دو مسیر ایجاد کنیم و از مسیر اول به سوم (صفحه صفحه اصلی به تک محصول) حرکت کنیم.

با کمی تغییر مولفه Home خود شروع کنید.

 export default function Home() { return ( <div className=" h-[100dvh] bg-gray-200"> <div className="flex flex-col items-center gap-8 "> <h1 className=" text-4xl text-[#2E4053 ] mt-20"> My Breadcrumb Component 🍞 </h1> <Breadcrumb /> <Outlet /> <div className="flex gap-4 p-2 "> <Link to="products" className=" rounded-md p-2 bg-[#777] text-white"> Products </Link> <Link to="products/1" className=" rounded-md p-2 bg-[#777] text-white"> Single Product </Link> </div> </div> </div> ); }

تغییرات شامل ایجاد یک صفحه محصول واحد است که بعداً به آن می‌رویم.

سپس یک مسیر تودرتو برای صفحه در جزء App ایجاد کنید:

 import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom"; import Home from "./Home"; import Homepage from "./Homepage"; import Products from "./Products"; import SingleProduct from "./SingleProduct"; export default function App() { return ( <BrowserRouter> <Routes> <Route index element={<Navigate replace to="home" />} /> <Route path="/" element={<Home />}> <Route path="home" element={<Homepage />} /> <Route path="products" element={<Products />}> <Route path=":productId" element={<SingleProduct />} /> </Route> </Route> </Routes> </BrowserRouter> ); }

برای صفحه محصولات موجود، این سبک ها و تغییرات را اضافه کنید:

 import { Outlet } from "react-router-dom"; export default function Products() { return ( <div className="bg-[#EDBB99] p-2 w-96 h-96 flex flex-col items-center"> <h1>Products Page</h1> <Outlet /> </div> ); } 

در نهایت، کامپوننت breadcrumb خود را تغییر دهید تا مسیرها را هنگامی که از صفحه اصلی به سمت آنها هدایت می‌کنید، نمایش داده شود.

 import { Link, useLocation } from "react-router-dom"; import RightArrowImg from "./assets/right-icon.png"; export default function Breadcrumb() { const location = useLocation(); return ( <div className="bg-white "> <ul className=" flex border p-2 gap-6 text-xl text-[#2E4053] items-center"> <Link to={"home"} className={`cursor-pointer hover:bg-[#E8DAEF] hover:text-black p-4 rounded-md ${ location.pathname === "/home" && "bg-[#b572d6] text-white" }`}> Home </Link> {location.pathname.includes("/products") && ( <> <img src={RightArrowImg} className="w-5 h-5 " alt="" /> <Link to={"products"} className={` hover:text-black cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md ${ location.pathname.includes("/products") && " bg-[#b572d6] text-white" } ${ location.pathname.includes("/products/") && " bg-[#E8DAEF] text-black" }`}> Products </Link> </> )} {location.pathname.includes(`/products/`) && ( <> <img src={RightArrowImg} className="w-5 h-5 " alt="" /> <Link to={"products"} className={`hover:text-black cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md ${ location.pathname.includes("/products") && "bg-[#b572d6] text-white" }`}> Single Product </Link> </> )} </ul> </div> ); }

در کد بالا، بر اساس مسیری که در آن هستیم، خرده‌های نان بیشتری را نشان می‌دهیم و از سبک‌هایی برای منعکس کردن تغییرات مسیر استفاده می‌کنیم.

اکنون آزمایش مؤلفه ما نتیجه زیر را به دست می دهد:

گفت ن-یک-مسیر-تودرتو" width="600" height="591" loading="lazy">

شیرین! 🍬

Breadcrumbs مبتنی بر ویژگی

نان خرده‌های مبتنی بر ویژگی‌ها بر برجسته کردن ویژگی‌ها یا آپشن های خاص صفحه جاری، مانند برچسب‌ها، دسته‌ها یا هر ابرداده مرتبط دیگری تمرکز می‌کنند.

آنها به جای اینکه به سادگی مسیر کاربر را از طریق سلسله مراتب وب سایت نشان دهند، زمینه اضافی را فراهم می کنند که می تواند به ناوبری و درک کمک کند.

یک مورد رایج برای آنها در سایت های تجارت الکترونیکی است که در آن چندین آیتم را مرور می کنید و چندین ویژگی محصول را فیلتر می کنید تا محصول مورد نظر خود را پیدا کنید.

برای شروع، مؤلفه برنامه ما بدون هیچ مسیریابی به شدت متفاوت به نظر می رسد.

 import Products from "./Products"; export default function App() { return ( <div className=" h-[100dvh] bg-[#EDBB99]"> <Products /> </div> ); }

سپس این JSX را به جزء Products خود اضافه کنید:

 import Breadcrumb from "./Breadcrumb"; export default function Products() { const dogsArray = [ { size: "S", color: "white", image: "/small-white-dog.jpg", name: "Gigi", age: 1, }, { size: "M", color: "white", image: "/medium-white-dog.jpg", name: "Tom", age: 2, }, { size: "L", color: "white", image: "/big-white-dog.jpg", name: "Jake", age: 3, }, { size: "S", color: "black", image: "/small-black-dog.jpg", name: "Hill", age: 1, }, { size: "M", color: "black", image: "/medium-black-dog.jpg", name: "Jack", age: 2, }, { size: "L", color: "black", image: "/big-black-dog.jpg", name: "Jones", age: 3, }, { size: "S", color: "brown", image: "/small-brown-dog.jpg", name: "Herbert", age: 1, }, { size: "M", color: "brown", image: "/medium-brown-dog.jpg", name: "Coco", age: 2, }, { size: "L", color: "brown", image: "/big-brown-dog.jpg", name: "Benny", age: 3, }, ]; return ( <div className="flex flex-col items-center p-2"> <h1 className="p-4">Adopt Page</h1> <Breadcrumb /> <main> <div className="relative grid grid-cols-5 gap-6"> {dogsArray.map((dog) => ( <div key={dog.name}> <div className=" w-[225px] rounded-md overflow-hidden"> <img className="w-full " src={dog.image} alt="" /> </div> <div className="grid items-center grid-cols-2 gap-2 mt-2"> <div className="flex items-center gap-2"> <span>Name:</span> <p className="text-center text-white bg-orange-900 border rounded-[4px] p-1.5 min-w-14"> {dog.name} </p> </div> <div className="flex gap-2 "> <span>Size:</span> <p className="text-center text-white min-w-14">{dog.size}</p> </div> <div className="flex gap-2 "> <span>Color:</span> <p className="text-center text-white capitalize min-w-14"> {dog.color} </p> </div> <div className="flex gap-2 "> <span>Age:</span> <p className="text-center text-white min-w-14"> {`${dog.age + " " + "year"}${dog.age > 1 ? "s" : ""}`} </p> </div> </div> </div> ))} <div className="absolute bottom-0 left-0 p-1 translate-y-[110%]"> <h2 className="mb-2">Filter by</h2> <div className="flex items-center mb-4"> <h3 className="w-12">Size:</h3> <div className="flex gap-2"> <button className={`p-2 text-center bg-white rounded-md min-w-14 `}> All </button> <button className={`p-2 text-center bg-white rounded-md min-w-14 `}> S </button> <button className={`p-2 text-center bg-white rounded-md min-w-14 `}> M </button> <button className={`p-2 text-center bg-white rounded-md min-w-14 `}> L </button> </div> </div> <div className="flex items-center"> <h3 className="w-12">Color:</h3> <div className="flex gap-2"> <button className={`p-2 text-center bg-white rounded-md min-w-14 `}> All </button> <button className={`p-2 text-center bg-white rounded-md min-w-14`}> White </button> <button className={`p-2 text-center rounded-md bg-white min-w-14 `}> Brown </button> <button className={`p-2 text-center rounded-md bg-white min-w-14 `}> Black </button> </div> </div> </div> </div> </main> </div> ); }

این JSX از داده‌های سگ ساختگی برای ایجاد یک الگو و استایل آن با tailwind استفاده می‌کند.

در حال حاضر، برنامه شما باید به این شکل باشد.

برای پیاده‌سازی پودرهای سوخاری مبتنی بر ویژگی، با ایجاد دو حالت برای آپشن های ی که می‌خواهید بر اساس آنها فیلتر کنید، شروع کنید:

 const [sizeFilter, setSizeFilter] = useState(null); const [colorFilter, setColorFilter] = useState(null);

سپس یک تابع برای فیلتر کردن بر اساس مقدار ارسال شده در ایجاد کنید:

 const filteredDogs = dogsArray.filter((dog) => { if (sizeFilter && dog.size !== sizeFilter) return false; if (colorFilter && dog.color !== colorFilter) return false; return true; });

پس از آن، آرایه ای را که برای ایجاد JSX استفاده کردید به آرایه ای که از تابع برگردانده شده است تغییر دهید:

 {filteredDogs.map((dog) => ( <div key={dog.name}>

در نهایت، از تابع setter برای عبور مقادیری که می خواهید بر اساس آن فیلتر کنید استفاده کنید:

 <main> <div className="relative grid grid-cols-5 gap-6"> {filteredDogs.map((dog) => ( <div key={dog.name}> <div className=" w-[225px] rounded-md overflow-hidden"> <img className="w-full " src={dog.image} alt="" /> </div> <div className="grid items-center grid-cols-2 gap-2 mt-2"> <div className="flex items-center gap-2"> <span>Name:</span> <p className="text-center text-white bg-orange-900 border rounded-[4px] p-1.5 min-w-14"> {dog.name} </p> </div> <div className="flex gap-2 "> <span>Size:</span> <p className="text-center text-white min-w-14">{dog.size}</p> </div> <div className="flex gap-2 "> <span>Color:</span> <p className="text-center text-white capitalize min-w-14"> {dog.color} </p> </div> <div className="flex gap-2 "> <span>Age:</span> <p className="text-center text-white min-w-14"> {`${dog.age + " " + "year"}${dog.age > 1 ? "s" : ""}`} </p> </div> </div> </div> ))} <div className="absolute bottom-0 left-0 p-1 translate-y-[110%]"> <h2 className="mb-2">Filter by</h2> <div className="flex items-center mb-4"> <h3 className="w-12">Size:</h3> <div className="flex gap-2"> <button // Reset size state onClick={() => setSizeFilter(null)} className={`p-2 text-center bg-white rounded-md min-w-14 `}> All </button> <button // Set filter to small onClick={() => setSizeFilter("S")} className={`p-2 text-center bg-white rounded-md min-w-14 `}> S </button> <button // Set filter to medium onClick={() => setSizeFilter("M")} className={`p-2 text-center bg-white rounded-md min-w-14 `}> M </button> <button // Set filter to large onClick={() => setSizeFilter("L")} className={`p-2 text-center bg-white rounded-md min-w-14 `}> L </button> </div> </div> <div className="flex items-center"> <h3 className="w-12">Color:</h3> <div className="flex gap-2"> <button // Reset color state onClick={() => setColorFilter(null)} className={`p-2 text-center bg-white rounded-md min-w-14 `}> All </button> <button // Set color to white onClick={() => setColorFilter("white")} className={`p-2 text-center bg-white rounded-md min-w-14 `}> White </button> <button // Set color to brown onClick={() => setColorFilter("brown")} className={`p-2 text-center rounded-md bg-white min-w-14 `}> Brown </button> <button // Set color to black onClick={() => setColorFilter("black")} className={`p-2 text-center rounded-md bg-white min-w-14 `}> Black </button> </div> </div> </div> </div> </main>

اکنون کامپوننت خود را آزمایش کنید نتیجه زیر را به همراه دارد:

نفیس!🍦

برای گفت ن عملکرد پودر سوخاری، قسمت فیلتر را به این کامپوننت وارد کنید:

 <Breadcrumb sizeFilter={sizeFilter} colorFilter={colorFilter} />

سپس از این ابزارها برای رندر هدرها استفاده کنید:

 import RightArrowImg from "./assets/right-icon.png"; export default function Breadcrumb({ sizeFilter, colorFilter }) { return ( <div className="mb-4 bg-gray-200 rounded-md "> <ul className=" flex items-center text-xl text-[#2E4053] text-left"> <li className={`cursor-pointer p-4 rounded-md `}>All</li> {sizeFilter && ( <> <img src={RightArrowImg} className="w-5 h-5 " alt="" /> <li className={`cursor-pointer p-4 rounded-md capitalize`}> {sizeFilter} </li> </> )} {colorFilter && ( <> <img src={RightArrowImg} className="w-5 h-5 " alt="" /> <li className={`cursor-pointer p-4 rounded-md capitalize`}> {colorFilter} </li> </> )} </ul> </div> ); }

قبل از اینکه نتیجه نهایی را ببینیم، بیایید شاخص هایی را اضافه کنیم که در حال حاضر چه فیلترهایی فعال هستند:

 <main> <div className="relative grid grid-cols-5 gap-6"> {filteredDogs.map((dog) => ( <div key={dog.name}> <div className=" w-[225px] rounded-md overflow-hidden"> <img className="w-full " src={dog.image} alt="" /> </div> <div className="grid items-center grid-cols-2 gap-2 mt-2"> <div className="flex items-center gap-2"> <span>Name:</span> <p className="text-center text-white bg-orange-900 border rounded-[4px] p-1.5 min-w-14"> {dog.name} </p> </div> <div className="flex gap-2 "> <span>Size:</span> <p className="text-center text-white min-w-14">{dog.size}</p> </div> <div className="flex gap-2 "> <span>Color:</span> <p className="text-center text-white capitalize min-w-14"> {dog.color} </p> </div> <div className="flex gap-2 "> <span>Age:</span> <p className="text-center text-white min-w-14"> {`${dog.age + " " + "year"}${dog.age > 1 ? "s" : ""}`} </p> </div> </div> </div> ))} <div className="absolute bottom-0 left-0 p-1 translate-y-[110%]"> <h2 className="mb-2">Filter by</h2> <div className="flex items-center mb-4"> <h3 className="w-12">Size:</h3> <div className="flex gap-2"> <button onClick={() => setSizeFilter(null)} className={`p-2 text-center rounded-md min-w-14 ${ // Dynamic background color add sizeFilter === null ? "bg-orange-900 text-white" : "bg-white text-black " }`}> All </button> <button onClick={() => setSizeFilter("S")} className={`p-2 text-center rounded-md min-w-14 ${ // Dynamic background color add sizeFilter === "S" ? "bg-orange-900 text-white" : "bg-white text-black " }`}> S </button> <button onClick={() => setSizeFilter("M")} className={`p-2 text-center rounded-md min-w-14 ${ // Dynamic background color add sizeFilter === "M" ? "bg-orange-900 text-white" : "bg-white text-black " }`}> M </button> <button onClick={() => setSizeFilter("L")} className={`p-2 text-center rounded-md min-w-14 ${ // Dynamic background color add sizeFilter === "L" ? "bg-orange-900 text-white" : "bg-white text-black " }`}> L </button> </div> </div> <div className="flex items-center"> <h3 className="w-12">Color:</h3> <div className="flex gap-2"> <button onClick={() => setColorFilter(null)} className={`p-2 text-center rounded-md min-w-14 ${ // Dynamic background color add colorFilter === null ? "bg-orange-900 text-white" : "bg-white text-black " }`}> All </button> <button onClick={() => setColorFilter("white")} className={`p-2 text-center rounded-md min-w-14 ${ // Dynamic background color add colorFilter === "white" ? "bg-orange-900 text-white" : "bg-white text-black " }`}> White </button> <button onClick={() => setColorFilter("brown")} className={`p-2 text-center rounded-md min-w-14 ${ // Dynamic background color add colorFilter === "brown" ? "bg-orange-900 text-white" : " bg-white text-black " }`}> Brown </button> <button onClick={() => setColorFilter("black")} className={`p-2 text-center rounded-md min-w-14 ${ // Dynamic background color add colorFilter === "black" ? "bg-orange-900 text-white" : " bg-white text-black" }`}> Black </button> </div> </div> </div> </div> </main>

آزمایش نهایی بر روی مؤلفه شما اکنون این نتیجه را می دهد:

و voilà! کامپوننت شما کاملاً فیلتر می‌شود، و همچنین یک خرده نان مفید را نشان می‌دهد تا به کاربران کمک کند بدانند با چه آپشن های ی فیلتر شده‌اند.

بهترین روش ها برای Breadcrumbs در React

هنگام پیاده‌سازی پودر سوخاری در React، پیروی از بهترین روش‌ها برای اطمینان از تجربه کاربری یکپارچه بسیار مهم است. در اینجا چند نکته کلیدی وجود دارد که باید در نظر گرفته شود:

سازگاری با React Routing : Breadcrumbs باید با ساختار مسیریابی برنامه هماهنگ باشد. شما می توانید این کار را با پیاده سازی breadcrumbs پویا با استفاده از یک کتابخانه مسیریابی خوب (React Router) انجام دهید. با تعریف مسیرها و تولید آرایه‌ای از پودرهای نان بر اساس مسیر فعلی کاربر، می‌توانید اطمینان حاصل کنید که دنباله سوخاری مسیر ناوبری کاربر را منعکس می‌کند.

عرض و عمق مسیرهای خرده نان : مسیرهای خرده نان باید نشان دهنده مکان کاربر در داخل برنامه باشد. این شامل استفاده از یک جداکننده، مانند یک اسلش ("/")، برای تمایز بین قسمت های مختلف دنباله پودر سوخاری است.

نامگذاری و پیمایش : Breadcrumbs باید به راحتی قابل درک و پیمایش باشد. این شامل استفاده از نام‌های واضح و توصیفی برای هر پودر سوخاری و اطمینان از قابل کلیک بودن هر لینک پودر سوخاری است که کاربر را به صفحه مناسب هدایت می‌کند.

اطمینان از دسترسی : Breadcrumbs باید برای همه کاربران قابل دسترسی باشد. این را می توان با استفاده از ویژگی aria-label برای شناسایی دنباله خرده نان به عنوان یک نقطه عطف ناوبری به دست آورد. این امر باعث می‌شود تا کاربران با فناوری‌های کمکی مکان‌یابی و پیمایش مسیر خرده نان را آسان‌تر کنند.

سفارشی سازی و سهولت استفاده : هنگام استفاده از یک جزء برای ایجاد پودر سوخاری، گزینه های سفارشی سازی و سهولت استفاده آن را در نظر بگیرید. به دنبال مؤلفه‌هایی باشید که پیش‌فرض‌های مفیدی را ارائه می‌دهند و امکان سفارشی‌سازی آسان متون، پیوندها و جداکننده‌ها را فراهم می‌کنند.

با رعایت این بهترین شیوه‌ها، می‌توانید در برنامه‌های React خود، سوخاری مؤثر و کاربرپسند ایجاد کنید.

در اینجا پیوندهایی به مخازن در GitHub وجود دارد:

بر اساس موقعیت مکانی

مبتنی بر مسیر

مبتنی بر ویژگی

نتیجه

پیاده‌سازی breadcrumbs در برنامه‌های React نه تنها کمک ناوبری را فراهم می‌کند، بلکه به یک تجربه کاربری یکپارچه و بصری کمک می‌کند. پایبندی به بهترین شیوه ها، قابلیت استفاده و دسترسی به برنامه ها را افزایش می دهد.

همانطور که عطر نان تازه پخته شده افراد گرسنه را ترغیب می کند تا به نانوایی بیایند، یک دنباله پودر سوخاری با ساختار مناسب می تواند کاربران را به کاوش و پیمایش آسان در یک برنامه ترغیب کند و در نهایت باعث بهبود ناوبری و تجربه کاربر شود. و اینگونه است که کوکی خرد می‌شود و دنباله‌ای از ناوبری لذت‌بخش در پی آن باقی می‌ماند.

اطلاعات تماس

می خواهید به من وصل شوید یا با من تماس بگیرید؟ در صورت تمایل به من در مورد موارد زیر ضربه بزنید:

توییتر / X: @jajadavid8

لینکدین: دیوید جاجا

ایمیل: Jajadavidjid@gmail.com

خبرکاو