Изменение цвета изображения в кнопке NavLink React - PullRequest
Новая
       56

Изменение цвета изображения в кнопке NavLink React

0 голосов
/ 27 мая 2020

Интересно, как изменить изображение, когда NavLink активен. Пока я написал это: 

            <li className={(active==='adminPanel') ? styles.LeftMenuActiveLink : null }
            onClick={()=>changeActive('adminPanel')}
            style={{color: '#69B4D6'}}>
            <NavLink   to="/adminPanel">
                <img 
                    src={(active==='adminPanel')? NotificationsImageActive : NotificationsImage} 
                    alt="notification icon" width="60px" height="60px" />
                <span >Panel Admina</span>
            </NavLink>
        </li>

где активная переменная находится в моем состоянии. Это работает, но обновление страницы уничтожает его. Мне интересно, могу ли я как-то проверить, активен ли NavLink, и с этой информацией установить мой src в <img />

Рабочая версия: 

<li>
                <NavLink onClick={() => setPath("/events")} activeClassName={styles.LoggedLeftMenuActiveLink} to="/events">
                    <img
                        src={(window.location.pathname === "/events") ? EventsImageActive : EventsImage}
                        alt="events icon" width="60px" height="60px" />
                    Wydarzenia
                </NavLink>
            </li>

1 Ответ

2 голосов
/ 27 мая 2020

Вы можете проверить что-то вроде location.pathname == "adminPanel", чтобы оно работало, даже когда ваша страница перезагружается / обновляется.

...