react router を使うと表示ができなくなる

React初心者です。Reactを使って、テスト的に簡単なサイトを作ろうとしています。
単純なこれだけのコードだと、npm startした際に、ちゃんとタイトルと表示されます。
（ちなみに、＄npm install react-router-domはしてます）

App.jsx
1import React from "react";
2
3function App(){
4  return(
5      <h1>タイトル</h1>     
6  );
7}
8export default App;

しかし、react routerを使おうとして、下記のページを参考にして行っているのですが、何をしても表示されません。
https://reffect.co.jp/react/react-router

App.js
1import React from "react";
2import {BrowserRouter,Route} from 'react-router-dom';
3
4function App(){
5  return(
6    <BrowserRouter>
7      <h1>タイトル</h1>
8      <Route path=''>
9        <Home/>
10      </Route>
11      <Route path='/about'>
12        <About/>
13      </Route>
14      <Route path='/contact'>
15        <Contact/>
16      </Route>
17    </BrowserRouter>
18  );
19}
20
21function Home(){
22  return <h2>home</h2>;
23}
24function About(){
25  return <h2>about</h2>;
26}
27function Contact(){
28  return <h2>Contact</h2>;
29}
30export default App;
31

urlのところに、localhost:3000/としてもlocalhost:3000/aboutとしても、localhost:3000/contactとしても真っ白のままです。

「react-router-dom 表示されない」と検索しても、同じような現象が見つからなく対処法に困っています。ちなみに、npm startした際のターミナルは、無事成功したとの表示です。

$npm start


Compiled successfully!

You can now view app417 in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://192.168.3.4:3000/

Note that the development build is not optimized.
To create a production build, use npm run build.

対処法を教えていただけますと助かります。