Question posted in 
I am struggling to figure out why my react app will not render within my root div element. I have spent hours googling narrowing down my issue to my index.html being shown in the console but nothing else is rendering even though it appears to be set up correctly. This is on the Firefox browser so I am trying to understand why it is not displaying.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App.jsx'
import { BrowserRouter } from 'react-router-dom';
ReactDOM.createRoot(document.getElementById('root')).render(
<BrowserRouter>
<App />
</BrowserRouter>,
);
import NavBar from './components/NavBar';
import Home from './components/Home';
import Login from './components/Login';
import AccountCreation from './components/AccountCreation';
import AddNewGame from './components/AddNewGame';
import GameStats from './components/GameStats';
import { Routes, Route } from 'react-router-dom';
function App() {
return (
<>
<NavBar />
<Routes>
<Route path='/' element={<Home />} />
<Route path='/login' element={<Login />} />
<Route path='/accountcreation' element={<AccountCreation />} />
<Route path='/addnewgame' element={<AddNewGame />} />
<Route path='/gamestats' element={<GameStats />} />
</Routes>
</>
)
}
export default App;
2
Answers
Figured it out after stepping away and coming back, I had not defined each component and yet was trying to import them causing this error. I now am able to see my components after defining each one!
The error must have to be on Home component. have you checked other paths like /gamestats
is NavBar rendered?
share us the home component code