ReactJS中NavLink与html-react-parser配合失效问题求助

核心原因 #

你拼接的HTML字符串中的<NavLink>被html-react-parser当作普通自定义HTML标签处理了，而非真正的React Router组件。这类标签仅在外观上和NavLink一致，但缺少React Router内置的路由跳转逻辑，所以点击没有反应。

最优解决方案 #

放弃字符串拼接的方式，直接用React语法遍历数据生成组件：

// 替换原字符串拼接代码
const sidemenuElements = Object.keys(this.state.sidemenu).map(key => {
  const toPath = key === "Dashboard" ? "/" : `/${key.toLowerCase()}`;
  return (
    <li key={key} className='nav-item d-flex align-items-center'>
      <NavLink 
        className={`nav-link fs-7 py-sm-2 ${key.toLowerCase()}-navitem fc-light`} 
        to={toPath}
      >
        <span>{key}</span>
      </NavLink>
    </li>
  );
});

// 渲染时直接输出该数组
{sidemenuElements}

这样生成的是完整的NavLink React组件实例，React Router会自动绑定路由跳转逻辑，点击就能正常工作。

备选方案（不推荐） #

如果必须使用html-react-parser，需要配置replace选项将字符串中的标签替换为真实组件：

import parse, { domToReact } from 'html-react-parser';

const parseOptions = {
  replace: ({ name, attribs, children }) => {
    // 注意HTML标签不区分大小写，所以这里匹配小写的navlink
    if (name === 'navlink') {
      return (
        <NavLink 
          to={attribs.to} 
          className={attribs.class} // HTML的class对应React的className
        >
          {domToReact(children, parseOptions)}
        </NavLink>
      );
    }
  }
};

// 拼接字符串时要把NavLink改成小写navlink
// 示例：sidemenu += "<li ...><navlink class='...' to='...'><span>"+key+"</span></navlink></li>";

// 渲染时传入配置
{parse(sidemenu, parseOptions)}

这种方式需要额外处理标签名、属性映射，代码冗余且容易出错，仅在特殊场景下使用。

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