React router change url change navlinks icon-CodePudding

I am using the React router version 5.2.0 and for example: when I am on the homepage, I want the home icon to change to the "active icon" ("acthome"), how should I proceed? Thanks The code is as follows:

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

CodePudding user response：

You can use this.props.location.pathname is a react-router feature, represent where the app is now

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