React自定义NavLink无法同时显示图标与导航文本问题求助

你的问题出在CustomNavLink组件的渲染逻辑上，当前用的&&运算符会触发短路求值——当第一个表达式为真时，只会返回第二个表达式的内容，没法同时渲染图标和文本，所以才会出现“要么显示图标要么显示文本”的情况。

修改后的CustomNavLink.jsx代码 #

import { NavLink } from "react-router-dom";

export function CustomNavLink ({ to, activeIcon, inActiveIcon, text }) {
    return (
    <NavLink to={to}>
        {({ isActive }) => (
            <>
                {isActive ? activeIcon : inActiveIcon}
                <span>{text}</span>
            </>
        )}
    </NavLink>
    );
};

代码说明 #

1. 用React片段(<>)把图标和文本包起来，确保两者能同时渲染
2. 根据isActive状态切换显示对应图标，文本部分始终单独渲染
3. 你可以给包裹文本的<span>加类名，方便后续调整图标和文本的间距等样式

修改后，不管导航是否处于激活状态，图标和文本都会同时显示，激活时还能自动切换对应图标。

内容的提问来源于stack exchange，提问作者Panoo