React Component content is not rendering or not found

Question

I am building a frontend with React for the first time and have just added routes. Since then, the pages no longer render correctly and I don't know where the error is.

View when I go to the homepage path

The component content does not seem to load

Here my App.js with the routes

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;

Here my 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();

Here is my home.js

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;

My package.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"
    ]
  }
}

Am I not calling the components correctly?

I want the React components to be rendered on the correct routes. Only the HTML tag is currently being rendered but not the content that I have stored in the function as a return.

Answer 1

The problem is that you are rendering the components with lower case letters.

React JSX will treat any lower-case tag as a regular HTML tag. If the tag does not exist, it will render it as a DIV

Instead of rendering it as you posted:

<Route path='/' exact element={<homePage />}/>

You need to render it as such:

<Route path='/' exact element={<HomePage />}/>

And instead of importing it as you posted:

import homePage from './Pages/home';

You need to import the components as so:

import HomePage from './Pages/home';