NextJS项目中JSON响应的HTML链接前端显示为文本的修复方法

方案1：使用dangerouslySetInnerHTML解析HTML标签 #

后端发送的消息是转义后的HTML字符串，React默认会将文本内容原样渲染，不会解析HTML。可以通过dangerouslySetInnerHTML属性让React解析这些标签：

// 前端组件中使用
// 假设已从API获取响应数据
const apiResponse = {
  status: false,
  msg: 'User Is Already Acticated. Please <a href="http://your-domain/login">Login</a>'
};

export default function MessageComponent() {
  return (
    <div dangerouslySetInnerHTML={{ __html: apiResponse.msg }} />
  );
}

⚠️ 注意：这个方法存在XSS风险，必须确保后端发送的内容是完全可信的，没有恶意代码注入的可能。

方案2：拆分消息内容与链接（更安全且符合NextJS规范） #

推荐这种方式，后端不直接发送HTML，而是分离消息文本和链接地址，前端用NextJS的<Link>组件渲染跳转，既安全又符合客户端路由的优化：

后端修改代码： #

res.status(500).json({
  status: false,
  msgText: "User Is Already Activated. Please",
  loginPath: "/login" // 直接传相对路径，前端用NextJS路由处理
});

前端渲染代码： #

import Link from 'next/link';

// 假设已从API获取响应数据
const apiResponse = {
  status: false,
  msgText: "User Is Already Activated. Please",
  loginPath: "/login"
};

export default function MessageComponent() {
  return (
    <div>
      {apiResponse.msgText}{' '}
      <Link href={apiResponse.loginPath}>
        <a>Login</a>
      </Link>
    </div>
  );
}

如果需要保留完整的消息文本逻辑，也可以拆分原消息内容：

const fullMsg = "User Is Already Activated. Please Login";
const [prefix] = fullMsg.split("Login");

return (
  <div>
    {prefix}
    <Link href="/login">
      <a>Login</a>
    </Link>
  </div>
);

为什么之前用<Link>替换后端<a>标签无效？ #

后端发送的是转义后的HTML字符串（比如<a href="...">Login</a>），前端拿到的是纯文本内容，直接替换字符串中的标签无法让React识别为组件，必须通过解析HTML或拆分数据结构的方式处理。

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