Question

我有NavLink个子组件

<NavLink
    className={StyledAppNavItem}
    activeClassName={StyledAppNavItemActive}
    to={link.path}
>
    <Icon size={28} icon={link.icon} color={isActive?'red':'blue'}/>
    <StyledAppNavName>{link.name}</StyledAppNavName>
</NavLink>

当链接处于活动状态时附加了activeClassName，我需要检测此链接是否处于活动状态并将支柱发送到其子组件Icon

有点像<Icon color={linkisActive?'red':'blue'}/>

Answer 1

很遗憾，无法从isActive获取NavLink。您需要创建自定义NavLink。像这样：

function MyNavLink() {
    return (
        <Route path={link.path} children={({ match }) => (
            <Link
                className={`${StyledAppNavItem} ${match ? StyledAppNavItemActive : ''}`}
                to={link.path}
            >
                <Icon size={28} icon={link.icon} color={match ? 'red' : 'blue'}/>
                <StyledAppNavName>{link.name}</StyledAppNavName>
            </Link>
        )} />
    );
}

或者您只需将Route添加到当前组件：

<NavLink
    className={StyledAppNavItem}
    activeClassName={StyledAppNavItemActive}
    to={link.path}
>
    <Route path={link.path} children={({ match }) => (
        <Icon size={28} icon={link.icon} color={match?'red':'blue'}/>
    )} />
    <StyledAppNavName>{link.name}</StyledAppNavName>
</NavLink>

支持检测链接是否在响应中处于活动状态

1 个答案: