reactのrouteを用いてページを作成したいが，何も表示されない

Question

実現したいこと

react初心者です．
webページ作成の際にreactを用いており，簡単なページ作成後にページ遷移を可能にするため調べながらいろいろ試しましたが，うまくいきません．

前提

具体的には，App.jsのアロー関数App内に記述したreturnでしかページに表示する要素を扱えず，
その他のURLの要素(Routes内に記述した要素)が一切反映されない，といった形になります．

発生している問題・エラーメッセージ

ログにエラーは出ていませんが，そもそも実行すらされていないように思います．

該当のソースコード

import React, { Component } from "react";
import { BrowserRouter, Link, Route, Routes } from "react-router-dom";
import "./App.css";

const App = () => {
  <BrowserRouter>
   <Routes>
      <div class="container text-center mt-5">
        <Route path={`/`} element={<Home />} />
        <Route path={`/about/`} element={<About />} />
      </div>
    </Routes>
  </BrowserRouter>
}

const Home = () => {
  return (
    <div>
      <h1>Welcome</h1>
    </div>
  )
}

const About = () => {
  return(
    <div>
      <h1>about</h1>
    </div>
  )
}

export default App;

補足情報（FW/ツールのバージョンなど）

react-router-domのバージョンは6です．
その他，必要な情報とありましたら，コメントにて質問していただけると幸いです

Answer 1

■原因
「URLの要素(Routes内に記述した要素)が一切反映されない」とのことですが、AppコンポーネントがJSXを返す箇所で、return文がないことが原因かと思います。

■対応
下記のようにAppコンポーネント内を書き換えてみてください

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <div className="container text-center mt-5">
          <Route path={`/`} element={<Home />} />
          <Route path={`/about/`} element={<About />} />
        </div>
      </Routes>
    </BrowserRouter>
  );
};

■補足
Reactの構文上class属性についてはclassNameと記載するようになっていますのでこちらも変更が必要かと思います

Comments

[narimi]

まとまったとてもわかりやすい説明本当にありがとうございます！

Appコンポーネントをいただいたコードに置き換えてみたところ，そのままではエラーが出てしまい使えなかったのですが，エラーコードにRoutesはそれより下にdivを持てないといった旨の内容だったので，divを削除したところ問題なく機能しました．

また，質問とは関係ない内容になるかもしれませんが，色々調べていると，現在使用しているreact18になったタイミングでreactDOMのサポートは終了しているとの記事が出てきました．
問題なく機能はしているためこのままでも勧められそうではありますが，何か問題となる可能性はありますでしょうか？

わかる範囲で教えていただけると幸いです．

[pikimaru]

レンダリングの関数が変わったみたいですね。
React18からはReactDOM.render()の代わりに"createRoot()"を使用する感じだと思います。
載せていただいているソースでは問題ないかと思います。

わかりやすい参考サイトがありましたので下記に記載いたします。
https://zenn.dev/nawomat/articles/f8be31b66bfc19

[narimi]

なるほど，，
今のところはrenderはどこにも用いていないので，このまま進めていけそうです．
ありがとうございます！！