我有一个应用程序，成功地路由的网址，但由于某种原因，网页不显示在标题下。我已经看了其他的问题和可用的资源，但我很难弄清楚我做错了什么。我正在使用react-router-dom 6.3.0
以下是我的文件供参考：Index.js:

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { BrowserRouter as Router } from "react-router-dom";

import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <Router>
        <App />
    </Router>
);

App.js:

import "./App.css";

import { Routes, Route } from "react-router-dom";

import Header from "./components/Header";

import Home from "./pages/Home";
import Freshman from "./pages/Freshman";
import Sophomore from "./pages/Sophomore";
import Junior from "./pages/Junior";
import Senior from "./pages/Senior";

function App() {
    return (
        <div className='app'>
            <Header />
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="freshman" element={<Freshman />} />
                <Route path="sophomore" element={<Sophomore />} />
                <Route path="junior" element={<Junior />} />
                <Route path="senior" element={<Senior />} />
            </Routes>
        </div>
    );
}

export default App;

Header.js:

import React from "react";

import { Link } from "react-router-dom";

import "./Header.css";

function Header() {
    return (
        <div className="header-container">
            <Link to="/" className="header-title">
                College
            </Link>
            <nav>
                <Link to="freshman" className="nav-item">
                    Freshman
                </Link>
                <Link  to="sophomore" className="nav-item">
                    Sophomore
                </Link>
                <Link to="junior" className="nav-item">
                    Junior
                </Link>
                <Link to="senior" className="nav-item">
                    Senior
                </Link>
            </nav>
        </div>
    );
}

export default Header;

Home.js:

import React from "react";

function Home() {
    return (
        <div>
            <h1>home</h1>
        </div>
    );
}

export default Home;

所有的页面都只是一个标签，其标题为黑色字体。然而，就像我说的，即使URL被正确路由，也没有一个页面被显示。任何帮助将不胜感激！