React 路由器更改 url 更改导航链接图标

Question

我正在使用 React router 5.2.0 版本，例如：当我在主页上时，我希望将主页图标更改为“活动图标”（“acthome”），我应该如何进行？谢谢代码如下：

            <li>
            <NavLink activeClassName="!text-white " to={"/"} href ="#" exact className="h-10 flex items-center text-sm font-bold text-link hover:text-white px-4 gap-4">
                <span className='transition-colors'>
                    <Icon name="home"/>
                </span>
                <span className='transition-colors hidden'>
                    <Icon name="acthome"/>
                </span>
                Ana sayfa
            </NavLink>
        </li>

Answer 1

您可以使用this.props.location.pathname is a react-router feature，表示应用现在所在的位置

<NavLink activeClassName="!text-white " to={"/"} href ="#" exact className="h-10 flex items-center text-sm font-bold text-link hover:text-white px-4 gap-4">
    {this.props.location.pathname !== '/' ?
            <span className='transition-colors'>
                <Icon name="home"/>
            </span>
            :
            <span className='transition-colors'>
                <Icon name="acthome"/>
            </span>
    }
    Ana sayfa
</NavLink>

React 路由器更改 url 更改导航链接图标

React router change url change navlinks icon

url

reactjs

react-router

tailwind-css