Почему мой NavLink не активируется с помощью Semantic-ui-реагирует? - PullRequest
Новая
       40

Почему мой NavLink не активируется с помощью Semantic-ui-реагирует?

0 голосов
/ 01 декабря 2018

Я использую комбинацию Semantic-UI-React и react-router-dom У меня есть компонент навигации всего с двумя ссылками.

Они выглядят так (NavLink от react-router-dom): 

 <Menu.Item name="home" as={NavLink} to="/" />
 <Menu.Item name="protected" as={NavLink} exact to="/protected" />

Когда я нажимаю ссылку Protected на моем сайте, компонент загружается, и я нахожусь на / защищенном маршруте.Но единственной активной ссылкой является Home NavLink.

Я пробовал с разными вариантами.Например, я добавил activeClassName="active" к ним обоим.Я пробовал это с exact для всех 2 или только одного маршрута.Ничего не меняется

Я нашел связанный вопрос: С React Semantic UI использовать NavLink для установки активного класса страницы?

Я попробовал это точно так, но он не будет работать намой сайт.

В чем может быть проблема?

1 Ответ

0 голосов
/ 01 декабря 2018

Решено:

Мой компонент Navbar не был подключен к маршрутизатору.Я подключил его с помощью помощника withRouter из react-router-dom

Это решило проблему.Код выглядит следующим образом: 

<Menu.Item
  name="home"
  as={NavLink}
  exact
  to="/"
  activeClassName="active"
/>
<Menu.Item        
  name="protected"
  as={NavLink}
  to="/protected"
  activeClassName="active"
/>
...