如何用Next.js Link组件包裹@用户名与话题标签实现无刷新跳转？

你之前用dangerouslySetInnerHTML结合普通<a>标签的方式，本质是生成静态HTML，没法利用Next.js的客户端路由能力，所以点击会刷新页面。换成直接生成React元素数组的方式就能解决这个问题，不用依赖dangerouslySetInnerHTML，还能完美集成Link组件。

修改后的实现代码 #

首先导入Next.js的Link组件，然后重构格式化函数：

import Link from 'next/link';

export const formatPostText = (text) => {
  // 拆分文本为单词和空格的数组（保留空格，避免丢失排版）
  const parts = text.split(/(\s+)/);
  
  return parts.map((part, index) => {
    // 跳过空内容
    if (!part.trim()) return <span key={index}>{part}</span>;
    
    // 处理@提及用户
    if (part.startsWith('@')) {
      const username = part.replace('@', '');
      return (
        <Link 
          key={index}
          href={`/${username}/in`}
          className="text-cyanBlue"
        >
          {part}
        </Link>
      );
    }
    // 处理#话题标签
    else if (part.startsWith('#')) {
      const hashtag = part.replace('#', '');
      return (
        <Link 
          key={index}
          href={`/hashtag/${hashtag}`}
          className="text-cyanBlue"
        >
          {part}
        </Link>
      );
    }
    // 普通文本直接返回
    else {
      return <span key={index}>{part}</span>;
    }
  });
};

代码说明 #

1. 拆分文本的方式优化：用split(/(\s+)/)拆分，会保留空格作为单独的数组项，这样不会丢失原文本的空格排版，比单纯按空格拆分更合理。
2. 生成React元素数组：遍历拆分后的每一部分，根据内容类型返回Link组件或者普通span，这样渲染出来的是React管理的元素，而非静态HTML。
3. 客户端路由生效：Next.js的Link组件会拦截点击事件，实现客户端无刷新跳转，完全符合你的需求。

使用方式 #

在组件里直接调用这个函数即可，不用dangerouslySetInnerHTML：

function Post({ text }) {
  return <div className="post-content">{formatPostText(text)}</div>;
}

这种方式比你之前考虑的React.createElement更直观，直接用JSX语法就能完成，代码可读性更高，也更符合React开发的常规做法。

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