在 NavLink 按钮 React 中更改图像颜色

Question

我想知道如何在 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 是否处于活动状态，并根据此信息在 <img />

中设置我的 src

工作版本：

<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>

Answer 1

你可以检查类似 location.pathname == "adminPanel" 所以即使你的页面是 reloaded/refreshed.

它也会工作

在 NavLink 按钮 React 中更改图像颜色

Changing image color in NavLink button React

router

reactjs