Открояване на активна връзка в 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;
}

Готово! А сега кликнете върху продуктите в списъка.