Означавање активне везе у React Router-у

Претпоставимо да смо додали неколико производа у нашу апликацију и прегледамо сваки од производа. Како да знамо на страници кога производа се тренутно налазимо? Хајде да истакнемо тај производ на листи, на пример подебљаним словима и браон бојом, а ако веза још увек учитава, онда сивом.

За почетак идите на почетну страницу, додајте на листу 4 производа и за сваки од њих унесите податке. Дајте им било која имена.

У означавању активне везе помоћи ће нам компонента NavLink, то је подврста компоненте Link, која зна о стању података. Обично се користи при креирању навигационог менија.

Хајде да отворимо root.jsx и увеземо NavLink (не заборавите да уклоните импорт Link, иначе React би могао да се пожали, јер га више не користимо):

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

Затим у макети заменимо компоненту Link са NavLink:

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

И додајмо му пропс className, а такође користимо условну логику. Ако страница је учитана, онда ће веза прећи у стање активне, ако се учитава, онда у стање учитавања, ако ништа не дешава, онда ће остати иста. У зависности од тога ће се мењати класа везе:

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>

Остало нам је да додамо стилове за active и loading класе у наш css-фајл:

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

a.loading {
  color: gray;
}

Готово! А сада кликните на производе на листи.