React Router中两个Link组件间的|{" "}语法含义咨询

这段代码里的|{" "}其实是两部分，分开来看就清楚了：

• | 就是普通的竖线文本，用来做两个导航链接之间的视觉分隔符，让页面上的导航项排版更清晰，最终页面会显示类似 Invoices | Expenses 的效果。
• {" "} 是JSX的特殊写法，用来插入一个空格字符。因为JSX编译时会忽略标签间的多余空格，直接写| 可能不会被渲染出来，用{" "}能确保React在竖线和后面的Link之间渲染出一个空格，避免元素挤在一起。

举个实际渲染后的HTML示例，你会看到：

<a href="/invoices">Invoices</a> | <a href="/expenses">Expenses</a>

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