Reactのルーティング設定で真っ白な画面しか表示されない原因

Question

まずは

Create-react-appを用いてlocalでWebページを製作しています。
React-router-domを用いてルーティング設定をしましたが、画面が真っ白になって作ったページが表示されません。

このコマンドを打ってreact-router-domのv6をインストールしました。

$ npm install react-router-dom@6

ルーティング設定したApp.jsとindex.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import {BrowserRouter} from 'react-router-dom';

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.getElementById('root')
);

import React from 'react';
import Top from './Top';
import Work from './Work';
import NotFound from './NotFound';
import './App.css';
import {Route, Routes } from 'react-router-dom';

class App extends React.Component {
  render(){
    return (
      <Routes>
        <Route path="/" element={<Top />}/>
        <Route path="/Work" element={<Work/>}/>
        <Route path="*" element={<NotFound />}/>
      </Routes>
    );
  }
}

export default App;

試しに最初に表示されるページ（"/"で<Top/>が表示される）所を新たにAbout.jsに設定しました。するとAbout.jsによって"About"がブラウザに表示されました。
<参考にしたサイト>
https://reffect.co.jp/react/react-router-6#i-4

<Route path="/" element={<Top />}/>
　　　　　　　　　↓
<Route path="/" element={<About />}/>

import React from 'react';
import Header from './Header';
import Main from './Main';
import Footer from './Footer';


class Top extends React.Component{
    render(){
        return(
            <div className="Top">
                <Header/>
                <Main/>
                <Footer/>
            </div>
        );
    }
}
export default Top;

function About(){
    return <h2>About</h2>
}
export default About;

About.jsは表示されますが、Top.jsは表示されません。なぜなのか調べてもわからず質問させていただきました。よろしくお願いします。

Answer 1

ココに載せていないのですが、ルーティング設定で<Link/>を別のファイルで使っていて、削除するとうまく表示されました。