Why is page content not showing in react-router-dom v6?

Question

Hey I'm struggling with this problem.

This is App.js

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'

const App = () => {
   return(
    <>
      <Router>
        <Routes>
          <Route path="/" component={Home} exact></Route>
          <Route path="/about" component={About}></Route>
        </Routes>
      </Router>
    </>
  )
}

export default App

This is Home.js

const Home = () => {
  return (
    <h1>Hello from home page</h1>
  )
}

export default Home

This is About.js

const About = () => {
  return (
    <h1>Hello from about page</h1>
  )
}

export default About

After this all code content is not showing in on the home page and about page!!

Answer 1

In version 6 they changed the way you pass the components to the routes. You now use the element prop and also use the angled brackets around the component name.
Referring to the exact docs for configuring routes.

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'

const App = () => {
   return(
    <>
      <Router>
        <Routes>
          <Route path="/" element={<Home/>} />
          <Route path="/about" element={<About/>} />
        </Routes>
      </Router>
    </>
  )
}

export default App