Блог

По сути, я хочу, чтобы все маршруты, имеющие одинаковую начальную подстроку, применяли стили activeClassName. Прямо сейчас у меня есть что-то вроде этого:

 ...
return(
   <div>
      <NavLink to="/home" activeClassName={styles.Active}/>
      <NavLink to={"/articles/"   this.props.hotArticle} activeClassName={styles.Active}/>
   </div>
);
 

NavLink to /home получает .К нему применяется активный стиль, поскольку это точный маршрут. Однако вторая навигационная ссылка на «/ articles / …» не имеет такого же стиля, когда я нажимаю на нее. Как мне это исправить?

Спасибо вам всем

Используйте NavLink функцию isActive prop.

Функция для добавления дополнительной логики для определения того, активна ли ссылка. Это следует использовать, если вы хотите сделать больше, чем просто убедиться, что путь ссылки соответствует пути текущего URL.

Навигационные ссылки по умолчанию уже сопоставляют префикс пути, но вы хотите сопоставить более общий префикс. match и location передаются isActive функции. Проверьте, начинается ли путь сопоставления с указанным префиксом пути маршрута.

 <NavLink
  activeClassName={styles.Active}
  isActive={(match) => match.path.startsWith("/articles/")}
  to={"/articles/"   this.props.hotArticle}
/>