React Component content is not rendering or not found-CodePudding

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.

CodePudding user response：

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';

CodePudding user response：

In React if a component name starts with lowercase name, it tries to load default HTML components like div, span, ... etc. Since there are no HTML component like homePage nothing will be loaded.

So rename your component with like HomePage, LoginPage, ... etc. It should work.