Esta es mi aplicación.js

 import "./App.css"; import Header from "./component/layout/Header/Header.js"; import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; import React from "react"; import Home from "./component/Home/Home.js"; function App() { return ( <Router> <Header /> <Route exact path="/" component={Home} /> <Footer /> </Router> ); } export default App;

Este es mi Home.js

 const Home = () => { return ( <Fragment> <div className="banner"> <p>Welcome to My Website</p> </div> </Fragment> ); }; export default Home;

Editar: logré eliminar la página negra después de envolver la ruta, pero el texto en Home.js no muestra "Bienvenido a mi sitio web"

 <Routes> <Route exact path="/" component={Home} /> </Routes>

este código ^ eliminó la página en blanco, pero el resultado es que el texto de Home.js "Bienvenido a mi sitio web" no se mostró. ¿Cómo puedo enrutar correctamente al componente Inicio?