React実行してもブラウザに何も表示されない

Question

import React, { Component } from 'react'
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'

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

const Home = () => {
  return (
    <div>
      <h1>Welcom</h1>
      <p><Link to="/about">About</Link></p>
    </div>
  )
}

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

export default App

PS C:\Users\XXX\sample02> npm install eslint-plugin-react --save-dev

up to date, audited 1471 packages in 2s

227 packages are looking for funding
  run `npm fund` for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
Compiled with warnings.

[eslint] 
src\App.js
  Line 1:17:  'Component' is defined but never used  no-unused-vars

Compiled with warnings.

[eslint] 
src\App.js
  Line 1:17:  'Component' is defined but never used  no-unused-vars

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

WARNING in [eslint] 
src\App.js
  Line 1:17:  'Component' is defined but never used  no-unused-vars

webpack compiled with 1 warning

開発環境：Visual Studio Code
コードを実行し画面で確認したところ、画面に何も表示がされませんでした。
ターミナルの内容を確認して、以下など参考に試しているのですが、解決できませんでした。
こちらはなぜエラーになっているのか教えていただきたいです。
https://stackoverflow.com/questions/69854011/matched-leaf-route-at-location-does-not-have-an-element

Comments

[maisumakun]

> export default App

こちらを呼び出すコードはどのようなものでしょうか？

[lop000p]

コメントありがとうございます。
npm startコマンドでブラウザが開かれて呼び出されると考えておりますが、質問されると自分でもよく理解できてないとこでした、、

Answer 1

こちらではいかがですか？

        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />