Once i added browserRouter it is showing me an empty page - reactjs

Question

I have downloaded everything and it is not showing or displaying anything on the page. Here is the error that is showing in the inspect
Here is the code
This is App.js
//import logo from './logo.svg';
import './App.css';
import { BrowserRouter , Routes, Route } from 'react-router-dom';
import HomeScreen from './screens/HomeScreen';
function App() {
return (
<BrowserRouter>
<div>
<header>
VAC
</header>
<main>
<Routes>
<Route path="/" element={<HomeScreen/>}/>
</Routes>
</main>
</div>
</BrowserRouter>
);
}
export default App;
This is HomeScreen.js
import data from '../data';
function HomeScreen() {
return (
<div>
<h1>Features Products </h1>
<div className="products">
{data.products.map((product) => (
<div className="product" key={product.slug}>
<a href={`/product/${product.slug}`}>
<img src={product.image} alt={product.name} />
</a>
<div className="product-info">
<a href={`/product/${product.slug}`}>
<p>{product.name}</p>
</a>
<p>
<strong>${product.price}</strong>
</p>
<button> Add To Cart</button>
</div>
</div>
))}
</div>
</div>
);
}
export default HomeScreen;
where can be the mistake? please help me

Answer 1

Let's try to break your App a bit, so it will be clearer what happens.
Layout that is same for all routes should be provided in toplevel route, not around Routes. Outlet inside Layout component will be replaced with particular route.
For more about Outlet check official documentation, I warmly recommend this tutorial.
import './App.css';
import { BrowserRouter , Routes, Route } from 'react-router-dom';
import HomeScreen from './screens/HomeScreen';
function Layout() {
return (
<div>
<header>
VAC
</header>
<main>
<Outlet />
</main>
</div>
);
}
function App() {
return (
<Routes>
{/* Here we provide styles through Layout component. */}
<Route path="/" element={<Layout />}>
<Route index element={<HomeScreen />} />
</Route>
</Routes>
);
}
/* It's good idea to separate providers from App. */
function WrappedApp() {
return (
<BrowserRouter>
<App />
</BrowserRouter>
);
}
export default WrappedApp;
If still nothing is displayed, please right click on webpage and in menu choose "inspect page source" and please provide what it shows. Additionaly it would also be useful to see index.ts file.

Answer 2

import { BrowserRouter as Router } from "react-router-dom";
import { render } from "react-dom";
import App from "./components/App";
render(
<Router>
<App />
</Router>,
document.getElementById("app")
);
// App.js
import React from "react";
import { Route, Switch } from "react-router-dom";
import HomePage from "./home/HomePage";
import AboutPage from "./about/AboutPage";
import Header from "./common/Header";
import PageNotFound from "./PageNotFound";
function App() {
return (
<div className="container-fluid">
<Header />
<Switch>
<Route exact path="/" component={HomePage} />
<Route path="/about" component={AboutPage} />
<Route component={PageNotFound} />
</Switch>
</div>
);
}
export default App;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>