React中使用Router Link组件时换行文本无间距的解决方法咨询

当在<p>标签内将普通文本与<Link>组件换行书写时，React渲染后两者之间会丢失空格，但原生<a>标签却能正常保留空格。以下是几种无需使用 或强制写一行的解决方案，同时兼容翻译文件场景：

方案1：通过CSS强制保留空格 #

给包含内容的<p>标签设置white-space: pre-wrap属性，该属性会保留代码中的换行和空格，同时自动处理文本换行：

.content-paragraph {
  white-space: pre-wrap;
}

<p className="content-paragraph">
  这是一段普通文本
  <Link to="/target">跳转链接</Link>
</p>

这个方案最适合翻译文件场景，翻译内容中的换行和空格会直接被保留，无需额外处理。

方案2：显式添加空格文本节点 #

在文本与<Link>之间插入单独的空格文本节点，React会识别并渲染这个空格：

<p>
  这是一段普通文本
  {' '}
  <Link to="/target">跳转链接</Link>
</p>

也可以用React Fragment包裹空格节点，写法更清晰：

<p>
  这是一段普通文本
  <>{' '}</>
  <Link to="/target">跳转链接</Link>
</p>

如果内容来自翻译文件，只需在翻译文本末尾或链接文本开头添加空格即可。

为什么原生标签正常？ #

原生HTML会自动将标签间的换行、多个空格合并为一个空格，但React在解析JSX时，会忽略仅包含换行或空格的空文本节点，导致空格丢失。上述方案就是通过CSS或显式节点的方式，让React保留这些空格。

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