react route function giving me blank page for my home screen-CodePudding

I'm having some trouble wherein adding a route path to my app, it gives me a blank page on my HomeScreen. I add this line below to my app.js

<Route path="/" element={HomeScreen} exact />

Can you guys help?

App.js

import { BrowserRouter as Router, Route } from "react-router-dom";
import { Container } from "react-bootstrap";
import Header from "./components/Header";
import Footer from "./components/Footer";
import HomeScreen from "./screens/HomeScreen";

const App = () => {
  return (
    <Router>
      <Header />
      <main className="py-3">
        <Container>
          <Route path="/" element={HomeScreen} exact />
        </Container>
      </main>
      <Footer />
    </Router>
  );
};

export default App;

HomeScreen.js

import { Row, Col } from "react-bootstrap";
import Product from "../components/Product";
import products from "../products";

const HomeScreen = () => {
  return (
    <>
      <h1>Latest Photocards</h1>
      <Row>
        {products.map((product) => (
          <Col key={product._id} sm={12} md={6} lg={4} xl={3}>
            <Product product={product} />
          </Col>
        ))}
      </Row>
    </>
  );
};

export default HomeScreen;

CodePudding user response：

Wrap Everything between the BrowserRouter tag

<BrowserRouter> 
 --here--
<BrowserRouter/>

CodePudding user response：

You have to pass JSX element in your Route as:

<Route path="/" element={<HomeScreen />} exact />

CodePudding user response：

Always wrap all your routes within the BrowserRouter and the Routes Components. Also the JSX element itself must be passed in to your routes.

Please find the modified snippet below.

    <Router>
      <Header />
      <main className="py-3">
        <Container>
          <Routes>
            <Route path="/" element={<HomeScreen />} exact />
          <Routes>
        </Container>
      </main>
      <Footer />
    </Router>