我第一次用React构建一个前端，刚刚添加了路由，从那以后，页面就不能正确呈现了，我不知道错误在哪里。
View when I go to the homepage path
组件内容似乎未加载
这是我的App.js和路线

import './App.css';
import React, { useState } from 'react';
import { Route, Routes, Switch } from "react-router-dom";
import homePage from './Pages/home';
import loginPage from './Pages/login';
import galleryPage from './Pages/gallery';

function App() {
  return (
    <>
      <Routes>
        <Route path='/' exact element={<homePage />}/>
        <Route path='/login' element={<loginPage />}/>
        <Route path='/gallery' element={<galleryPage />}/>
        <Route path='/dev' element={<test />}></Route>
      </Routes>
    </>
  );
}

export default App;

这里是我的index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

reportWebVitals();

这里是我的家

import Navbar from "../Components/Navigation/Navbar";
import Calendartsc from "../Components/Calendar/calendar";
import Events from "../Components/Events/Events";
import React from "react";
import '../index.css';
import './home.css'

let inhalt = "Temporary test content"

function homePage() {
  return (
    <>
      <div className="App">
        <title>Vereinswebsite</title>
        <Navbar />
        <div className='card'>
          <h2>Wilkommen</h2>
          <div className="flex-container">
            {inhalt}
          </div>
          <div className="flex-container">
            <div className='flex-child magenta'>
              <div className='card'>
                <Calendartsc />
              </div>
            </div>
            <div className='flex-child green'>
              <div className='card'>
                <Events />
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default homePage;

我的软件包. json

{
 "name": "test",
 "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/react": "^18.0.26",
    "react": "^18.2.0",
    "react-bootstrap": "^2.7.0",
    "react-calendar": "^4.0.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.6.2",
    "react-scripts": "^2.1.3",
    "web-vitals": "^2.1.4"
 },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
     ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

我没有正确调用组件吗？
我想让React组件呈现在正确的路径上，当前只呈现HTML标记，而不呈现作为返回值存储在函数中的内容。