エラー`Unterminated JSX contents.`が発生

はじめに

UdemyでReactを学んでいる最中にタイトルのエラーに遭遇したので投稿しました。

環境

StackBlitz
react 19.2.3
react-dom 19.2.3

問題

下記のコードでタイトルに記載したエラーが発生しました。コードを確認しても、HTML的におかしいところはないはず...

<BrowserRouter>
  <Link to="/">Home</Link>
  <br>
  <Link to="/page1">Page1</Link>
  <br>
  <Link to="page2">Page2</Link>
  <Home />
  <Page1 />
  <Page2 />
</BrowserRouter>

解決方法

指摘されていたのは<br>の箇所でした。
公式ドキュメントを見ると、

JSX ではすべてのタグを明示的に閉じる必要があります。<img> のような自動で閉じるタグは のようになりますし、<li>oranges のような囲みタグは <li>oranges</li> と書かなければなりません。

と記述がありました。
これに従って、<br> を<br />に修正すると、エラーが消えました。

おわりに

今までは、emmetの補完のおかげでこのエラーに出会ってきませんでした。
ふとした瞬間に<br>を全部記述したため、このエラーに遭遇しました。
補完機能のありがたさを実感した出来事でした。

参考

公式ドキュメント