React router not displaying component data

Question

App.js code

import "./App.css";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Header from "./component/layout/Header/Header.js";
import Footer from "./component/layout/Footer/Footer.js";
import WebFont from "webfontloader";
import React from "react";
import Home from "./component/Home/Home.js";

function App() {
  React.useEffect(() => {
    WebFont.load({
      google: {
        families: ["Roboto", "Droid Sans", "Chilanka"],
      },
    });
  }, []);

  return (
    <Router>
      <Header />
      <Routes>
        <Route exact path="/" component={Home} />
      </Routes>
      <Footer />
    </Router>
  );
}

export default App;

################################### Home.js code

import React from "react";
import { CgMouse } from "react-icons/all";
import "./Home.css";

const Home = () => {
  return (
    <>
      <div className="banner">
        <p>Welcome to Ecommerce</p>
        <h1>FIND AMAZING PRODUCTS BELOW</h1>

        <a href="#container">
          <button>
            Scroll <CgMouse />
          </button>
        </a>
      </div>

      <h2 className="homeHeading">Featured Products</h2>

      <div className="container" id="container"></div>
    </>
  );
};

export default Home;

I can able to see the header and footer content...but not the Home component content.

I am attaching the URL of screenshots of my codes here for detail

http://otologynew.asteamwork.com/wp-content/themes/asgola/images/Screenshot_2.png

http://otologynew.asteamwork.com/wp-content/themes/asgola/images/Screenshot_3.png

http://otologynew.asteamwork.com/wp-content/themes/asgola/images/Screenshot_4.png

http://otologynew.asteamwork.com/wp-content/themes/asgola/images/Screenshot_5.png

Answer 1

You’re using react router v6 so it should be something like this:

<BrowserRouter>
    <Routes>
      <Route path="/" element={<Home/>}/>
    </Routes>
</BrowserRouter>

There are examples in the release/tutorial docs here: https://reactrouter.com/docs/en/v6/getting-started/tutorial