React Router-daky aktiw baglanyşygy bellenmek

Göz öňüne getiriň, biz öňümizdaky programmamyza birnäçe önümi goşduk we her bir önümi synlaýarys. Şu wagt haýsy önümiň sahypasynda ýerleşýändigimizi nädip bilip bileris? Geliň, bu önümi sanawda belleneliň, meselem, gaty hat we goňur reňkde, eger baglanyşyk ýüklenýän bolsa, çal reňkde.

Başlangyç üçin baş sahypa git, sanawa 4 önüm goş we her biri üçin maglumatlary giriz. Olara islendik ad ber.

Aktiw baglanyşygy bellenmekde bize NavLink komponenti kömek eder, bu Link komponentiň görnüşi bolup, maglumat ýagdaýy barada bilýär. Adatça, navigasiýa menýusyny döredilende ulanylýar.

Geliň, root.jsx faýlyny açalyň we NavLink import edeliň (Link import-y aýyrmagy ýatdan çykarmaň, ýogsa React gatylyp biler, sebäbi biz ony mundan beýläk ulanmaýarys):

routes/root.jsximport { NavLink } from 'react-router-dom';

Soňra maketde Link komponentiň ýerine NavLink goýalyň:

routes/root.jsx<NavLink key={product.id} to={`products/${product.id}`}>
  {product.name ? product.name : <i>unnamed</i>}
</NavLink>

We ona className propsyny goşalyň, şeýle hem şertli logikany ulanalyň. Eger sahypa ýüklenen bolsa, baglanyşyk aktiw ýagdaýa geçer, eger ýüklenýän bolsa, ýüklenme ýagdaýyna geçer, eger hiç zat bolmasa, öňki ýaly galar. Şuňa garap, baglanyşygyň klassy üýtgeýär:

routes/root.jsx<NavLink
  key={product.id}
  to={`products/${product.id}`}
  className={({ isActive, isPending }) =>
    isActive ? 'active' : isPending ? 'loading' : ''
  }
>
  {product.name ? product.name : <i>Unnamed</i>}
</NavLink>

Bize galýan iş, css faýlymyza active we loading klaslary üçin stilleri goşmak:

index.cssa.active {
  font-weight: bold;
  color: brown;
}

a.loading {
  color: gray;
}

Taýýar! Indi sanawdaky önümler basyp görüň.