使用子组件- React路由器上的activeClassName属性

Question

我目前有一个带有几个链接的侧边栏。我想让它在用户导航到某个页面时，相应的侧边栏项目被选中。我正在使用React Router和NavLink组件。下面是我的代码：

<Router>
    <div className="bg-2 h-full fixed w-60 border-r default-border">
        <Logo fill="#ffff" height="25px" width="" className="m-7 mt-8 mb-8" />
        <NavLink to="/dashboard"><NavItem icon={faHome} text="Home"/></NavLink>
        <div className="mt-8">
            <NavLink to="/payments"><NavItem icon={faReceipt} text="Payments" /></NavLink>
            <NavLink to="/releases"><NavItem icon={faShoppingCart} text="Releases" /></NavLink>
            <NavLink to="/keys"><NavItem icon={faKey} text="Keys" /></NavLink>
            <NavLink to="/customers"><NavItem icon={faUserAlt} text="Customers" /></NavLink>
            <NavLink to="/packages"><NavItem icon={faBoxOpen} text="Packages" /></NavLink>
        </div>
        <div className="mt-8">
           <NavLink to="/developers"><NavItem icon={faCode} text="Developers" /></NavLink>
            <div className="mb-3">
                <NavLink to="/apikeys"><SubItem text="API Keys" /></NavLink>
                <NavLink to="/logs"><SubItem text="Logs" /></NavLink>
            </div>
            <NavLink to="/settings"><NavItem icon={faCog} text="Settings" /></NavLink>
        </div>
    </div>

    <Switch>
        <Route path="/dashboard">
            <Home/>
        </Route>
        <Route path="/payments">
            <Payments/>
        </Route>
        <Route path="/releases">
            <Releases/>
        </Route>
        <Route path="/keys">
            <Keys/>
        </Route>
        <Route path="/customers">
            <Customers/>
        </Route>
    </Switch>
</Router>

如您所见，在NavLink内部，我有自己的组件NavItem。NavItem代码如下：

const NavItem = (props) => {
    return (
        <div className="group ml-7 cursor-pointer flex flex-row my-1.5 items-center text-gray-400">
            <div className="text-center w-5">
                <FontAwesomeIcon icon={props.icon} className="group-hover:text-gray-300 transition text-sm" />
            </div>
            <span className="font-medium ml-4 group-hover:text-gray-300 transition text-sm">{props.text}</span>
        </div>
    )
}

我的问题是，当我尝试使用React Router中的activeClassName属性时，它不适用于NavItem组件。我如何才能做到这一点？

Answer 1

我通过创建自己的状态跟踪并将状态传递给NavItem组件解决了这个问题。