I am not able to display the pages/components in React using BrowserRouter-CodePudding

Here is my code for the App.js and Home.js I want to display Home.js on the browser.

App.js

import "./App.css";
import { Route, BrowserRouter } from "react-router-dom";
import Home from "./pages/Home";
function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Route path="/" exact component={Home} />
      </BrowserRouter>
    </div>
  );
}

export default App;

Home.js

import React from "react";

function Home() {
  return (
    <div>
      <h1>Home</h1>
    </div>
  );
}

export default Home;

The index file is as follows index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

reportWebVitals();

So I want to display it on browser but I am unable

CodePudding user response：

Try this way

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

CodePudding user response：

Shouldn't Home component be a child instead of being prop? I mean:

<Route>
    <Home/>
</Route>