Ինչպես ստեղծել Breadcrumbs React.js-ում

Դարձրեք ձեր կայքի նավարկությունը՝ օգտագործելով Breadcrumbs React-ում:

Դուք երբևէ նկատել եք տեքստի այդ փոքրիկ հատվածները որոշ կայքերում, որոնք ցույց են տալիս ձեր ընթացիկ գտնվելու վայրը կայքում: Դրանք կոչվում են breadcrumbs, և դրանք կարող են օգտակար միջոց լինել օգտատերերին կողմնորոշելու համար, հատկապես բարդ կայքերում նավարկելու ժամանակ: Այս հոդվածը ցույց կտա ձեզ, թե ինչպես կարելի է React.js-ում փշրանքներ ստեղծել:

Ի՞նչ են հացի փշրանքները և որքանո՞վ են դրանք կարևոր:

Breadcrumbs-ը սովորաբար տեքստի փոքր կտորներ են, որոնք ցույց են տալիս ընթացիկ գտնվելու վայրը վեբկայքում: Նրանք կարող են օգտակար լինել օգտատերերին կողմնորոշելու համար, հատկապես մի քանի էջ ունեցող կայքերում նավարկելու ժամանակ: Հղումների հետք տրամադրելով՝ breadcrumbs-ը կարող է օգնել օգտատերերին հասկանալ, թե որտեղ են գտնվում վեբկայքում և թույլ տալ նրանց հեշտությամբ հետ գնալ դեպի նախորդ բաժինները:

Կարևոր է նշել, որ հացի փշրանքները չպետք է օգտագործվեն որպես վեբկայքում նավիգացիայի հիմնական միջոց: Ավելի շուտ, դրանք պետք է օգտագործվեն ի լրումն նավիգացիոն այլ տարրերի, ինչպիսիք են ընտրացանկը կամ որոնման տողը:

Ինչպես ստեղծել Breadcrumbs React.js-ում

React.js-ում breadcrumbs ստեղծելու երկու հիմնական եղանակ կա՝ օգտագործելով react-router-dom գրադարանը կամ օգտագործելով use-react-router-breadcrumbs գրադարանը: Բայց նախքան սկսելը, դուք պետք է ստեղծեք React հավելված:

Մեթոդ 1. Օգտագործելով react-router-dom գրադարանը

React-router-dom գրադարանի միջոցով դուք կարող եք ձեռքով ստեղծել breadcrumbs ձեր React հավելվածի յուրաքանչյուր ճանապարհի համար: Գրադարանը տրամադրում է բաղադրիչ, որը կարող է օգտագործվել հացի փշրանքներ ստեղծելու համար:

React-router-dom գրադարանն օգտագործելու համար նախ անհրաժեշտ է տեղադրել այն՝ օգտագործելով npm.

npm install react-router-dom

Երբ գրադարանը տեղադրվի, կարող եք ներմուծել այն ձեր React բաղադրիչ.

import { Link } from 'react-router-dom'

Այնուհետև կարող եք օգտագործել բաղադրիչը՝ հացի փշրանքներ ստեղծելու համար.

<Link to="/">Home</Link>
<Link to="/products">Products</Link>
<Link to="/products/1">Product 1</Link>

Այժմ դուք կարող եք որոշ ոճեր ավելացնել հացի փշրանքներին և ընդգծել ընթացիկ էջը, որում գտնվում եք: Դրա համար կարող եք օգտագործել className հենարանը բաղադրիչի: Ընթացիկ ուղու անունը ստանալու համար կարող եք օգտագործել location օբյեկտը react-router-dom գրադարանից.

import { Link, useLocation } from 'react-router-dom'
function Breadcrumbs() {
  const location = useLocation();
  return (
    <nav>
      <Link to="/"
        className={location.pathname === "/" ? "breadcrumb-active" : "breadcrumb-not-active"}
      >
        Home
      </Link>
      <Link to="/products"
        className={location.pathname.startsWith("/products") ? "breadcrumb-active" : "breadcrumb-not-active"}
      >
        Products
      </Link>
      <Link to="/products/1"
        className={location.pathname === "/products/1" ? "breadcrumb-active" : "breadcrumb-not-active"}
      >
        Product 1
      </Link>
    </nav>
  );
}
export default Breadcrumbs;

Այժմ ստեղծեք նոր CSS ֆայլ և անվանեք այն breadcrumbs.css: Ֆայլին ավելացրեք հետևյալ CSS կանոնները.

.breadcrumb-not-active {
  color: #cccccc;
}
.breadcrumb-active {
  color: #000000;
}
.breadcrumb-arrow {
  margin-left: 10px;
  margin-right: 10px;
}

Այժմ ներմուծեք ձեր CSS ֆայլը ձեր React բաղադրիչի մեջ և ավելացրեք breadcrumb-arrow դասը ձեր բաղադրիչներին:

import { Link, useLocation } from 'react-router-dom'
import "./breadcrumbs.css";
function Breadcrumbs() {
  const location = useLocation();
  return (
    <nav>
      <Link to="/"
        className={location.pathname === "/" ? "breadcrumb-active" : "breadcrumb-not-active"}
      >
        Home
      </Link>
      <span className="breadcrumb-arrow">&gt;</span>
      <Link to="/products"
        className={location.pathname.startsWith("/products") ? "breadcrumb-active" : "breadcrumb-not-active"}
      >
        Products
      </Link>
      <span className="breadcrumb-arrow">&gt;</span>
      <Link to="/products/1"
        className={location.pathname === "/products/1" ? "breadcrumb-active" : "breadcrumb-not-active"}
      >
        Product 1
      </Link>
    </nav>
  );
}
export default Breadcrumbs;

React-ում կան տարբեր տեսակի կեռիկներ: React-router-dom գրադարանի useLocation կեռիկը հնարավորություն է տալիս մուտք գործել տեղադրության օբյեկտ, որն ունի տեղեկատվություն ընթացիկ URL ուղու մասին:

բաղադրիչի className հենարանն ավելացնում է CSS դաս հացի փշրանքներին: className հենարանը վերցնում է տող կամ տողերի զանգված: Եթե դա տող է, այն կավելացնի տողը որպես մեկ դաս տարրին: Եթե դա տողերի զանգված է, զանգվածի յուրաքանչյուր տող կավելացվի որպես առանձին դաս:

startsWith մեթոդը ստուգում է, թե արդյոք ընթացիկ ուղու անունը սկսվում է «/products»-ով: Դա պայմանավորված է նրանով, որ ապրանքների էջի հացահատիկը պետք է ակտիվ լինի ոչ միայն այն դեպքում, երբ ուղին «/products» է, այլ նաև, երբ ուղին «/products/1», «/products/2» և այլն է։

Մեթոդ 2. Օգտագործելով use-react-router-breadcrumbs գրադարանը

React-ում breadcrumbs ստեղծելու մեկ այլ եղանակ է use-react-router-breadcrumbs գրադարանի օգտագործումը: Այս գրադարանը ավտոմատ կերպով ստեղծում է հացաթխման փշրանքներ՝ հիմնվելով ձեր React հավելվածում սահմանված երթուղիների վրա:

Այս գրադարանն օգտագործելու համար նախ պետք է այն տեղադրել npm-ի միջոցով.

npm install use-react-router-breadcrumbs

Երբ գրադարանը տեղադրվի, կարող եք ներմուծել այն ձեր React բաղադրիչ.

import useBreadcrumbs from 'use-react-router-breadcrumbs'

Այնուհետև կարող եք օգտագործել useBreadcrumbs կեռիկը հացի փշրանքներ ստեղծելու համար.

const breadcrumbs = useBreadcrumbs();
console.log(breadcrumbs);

Սա կգրանցի breadcrumb օբյեկտների զանգվածը վահանակ: Յուրաքանչյուր breadcrumb օբյեկտ պարունակում է տեղեկատվություն երթուղու մասին, ինչպիսիք են անունը, ուղին և պարամետրերը:

Այժմ դուք կարող եք ցուցադրել ձեր հացի փշրանքները էկրանին: Դուք կարող եք օգտագործել բաղադրիչը react-router գրադարանից՝ ձեր հացի փշրանքները ստեղծելու համար.

import { Link } from 'react-router-dom'
import useBreadcrumbs from 'use-react-router-breadcrumbs'
const routes = [
  { path: '/users/:userId', breadcrumb: 'Example 1' },
  { path: '/data', breadcrumb: 'Example 2' }
];
function Breadcrumbs() {
  const breadcrumbs = useBreadcrumbs(routes);
  console.log(breadcrumbs)
  return (
    <nav>
      {breadcrumbs.map(({ match, breadcrumb }) => (
        <Link key={match.url} to={match.url}>
          {breadcrumb} /
        </Link>
      ))}
    </nav>
  );
}
export default Breadcrumbs;

Link բաղադրիչը ներմուծվում է react-router-dom գրադարանից: Դուք կօգտագործեք այս բաղադրիչը՝ հավելվածի այլ մասերի հղումներ ստեղծելու համար: Կարող եք նաև ստեղծել պաշտպանված երթուղիներ՝ օգտագործելով Link բաղադրիչը:

Ստեղծվում է երթուղու օբյեկտների զանգված: Յուրաքանչյուր երթուղու օբյեկտ պարունակում է ուղի և breadcrumb հատկություն: Path հատկությունը համապատասխանում է URL-ի ուղուն, իսկ breadcrumb հատկությունը համապատասխանում է breadcrumb-ի անվանմանը:

useBreadcrumbs կեռիկը օգտագործվում է հացի փշրանքները ստեղծելու համար: Այս կեռիկը որպես պարամետր ընդունում է երթուղիների զանգված: Երթուղիներն օգտագործվում են հացի փշրանքները առաջացնելու համար:

Քարտեզի մեթոդն օգտագործվում է հացաթխման զանգվածի վրա կրկնելու համար: Յուրաքանչյուր հացաթխման համար ստեղծվում է բաղադրիչ: Կապ բաղադրիչն ունի to հենարան, որը համապատասխանում է հացահատիկի URL-ի ուղուն: Հացահատիկն ինքնին ներկայացվում է որպես բաղադրիչի բովանդակություն:

Այժմ դուք կարող եք մի քիչ ոճավորել հացի փշրանքներին: Ստեղծեք նոր CSS ֆայլ և անվանեք այն Breadcrumbs.css: Դրանից հետո ֆայլին ավելացրեք հետևյալ CSS կանոնները.

.breadcrumb-not-active {
  color: #cccccc;
}
.breadcrumb-active {
  color: #000000;
}

Այժմ դուք կարող եք ներմուծել CSS ֆայլը React բաղադրիչի մեջ և ավելացնել breadcrumb դասերը բաղադրիչներին.

import { Link, useLocation } from 'react-router-dom'
import useBreadcrumbs from 'use-react-router-breadcrumbs'
import "./Breadcrumbs.css";

const routes = [
  { path: '/users/:userId', breadcrumb: 'Example 1' },
  { path: '/data', breadcrumb: 'Example 2' }
];
function Breadcrumbs() {
  const breadcrumbs = useBreadcrumbs(routes);
  const location = useLocation()
  return (
    <nav>
      {breadcrumbs.map(({ match, breadcrumb }) => (
        <Link 
        key={match.url} 
        to={match.url}
        className={match.pathname === location.pathname ? "breadcrumb-active" : "breadcrumb-not-active"}
        >
          {breadcrumb} / 
        </Link>
      ))}
    </nav>
  );
}
export default Breadcrumbs;

Բարձրացրեք օգտատերերի ներգրավվածությունը Breadcrumbs-ով

Բաց փշրանքներով դուք կարող եք ոչ միայն օգնել օգտատերերին հասկանալ, թե որտեղ են գտնվում ձեր կայքում, այլ նաև կարող եք մեծացնել օգտվողների ներգրավվածությունը: Breadcrumbs-ը կարող է օգտագործվել՝ ցույց տալու օգտատիրոջ առաջընթացը առաջադրանքի միջոցով, օրինակ՝ գրանցման գործընթացի կամ գնումների միջոցով: Ցույց տալով օգտատիրոջ առաջընթացը, դուք կարող եք խրախուսել նրան կատարել առաջադրանքը:

Կան նաև շատ այլ բաներ, որոնք դուք պետք է հիշեք վեբ կայք նախագծելիս, ինչպիսիք են օգտագործելիությունը, մատչելիությունը և շարժական սարքերի հարմարավետությունը: Այնուամենայնիվ, եթե դուք հիշեք այս բաները, կարող եք ստեղծել մի կայք, որը և՛ օգտագործողի համար հարմար է, և՛ գրավիչ: