React router dom not rendering my pages (v6)

Question

I am working on a MERN project and I am not sure why my pages are not being rendered. I am following a tutorial and we have the exact code.

This is my App.jsx

import './App.css'
import { Routes, Route } from 'react-router-dom'
import IndexPage from './components/IndexPage'

function App() {
  return (
      <Routes>
        <Route index element={<IndexPage />} />
      </Routes>
    )
}

export default App

and main.jsx

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

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

I am using react-router-dom@6.21.3 and react@18.2.0. Already tried deleting node_modules and running npm install again, no success.

Answer 1

I fixed this by adding a return statement to my IndexPage.