Routing not working in React Js Application

[sour kettle]

I just start building a website using react.js but when I tried to route the application using react-router-dom it doesn't work. It won't show any error and it will display blank page in localhost:3000.

\ ```React.JS

this is the App.Js
//
import './App.css';
import React from 'react';
import {BrowserRouter,Router,Routes,Route } from 'react-router-dom';
import Card from './components/Card/Card';
import CardData from './components/Card/CardData';
import Footer from './components/Footer/Footer';
import Navbar from './components/Navbar/Navbar';
import Home from './components/Pages/Home/Home';
import Contact from './components/Pages/Contact/Contact';
import Products from './components/Pages/Products/Products';
import About from './components/Pages/About/About';

const cards = CardData.map(item => {
return (
<Card
key={item.id}
item={item}
/>
)
})

function App() {
return (
<div>
<BrowserRouter>
<Router>
<Routes>
<Navbar />
<Route path='/'>
<Home />
</Route>
<Route path='/products'>
<Products />
</Route>
<Route path='/contact'>
<Contact />
</Route>
<Route path='/about'>
<About />
</Route>
</Routes>
</Router>
</BrowserRouter>
<section className="cards-list">
{cards}
</section>
<Footer />
</div>
);
}

export default App;

As mentioned above, it should be able to navigate throughout pages but when I tried the localhost:3000 it will display a blank page. It won't display anything or any errors.

[cold flax]

There's no "Router" component

Also highly suggest getting Prettier formatting setup this is unreadable

[heavy bronze]

You forget to add the element property to the Route
Here's what you should do
<Route path="/product" element={<Component/>}/>

[cold flax]

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

You can have 1 BrowserRouter and many Routes with Route elements inside.

Routes acts like a switch

And Routes can only have Route elements inside of it as direct children

[sour kettle]

i did as you have mentioned above but still it want display anything it shows only a blank screen

[cold flax]

I said you can only have Route elements as direct children of Routes

But what do you have as a direct child not being a Route component

TLDR move the navbar out of Routes

[sour kettle]

it still the same 😿

[cold flax]

Also quick note, if you're developing a react application, and the screen is "blank", just check the browser's console, there's errors... please investigate, i cant do much with "blank screen"

[sour kettle]

okay by the way thanks for the help bro

[heavy bronze]

Did you import it??

[sour kettle]

thanks everyone for the help from you guys and i solved the Problem it was because i have added the section Card component inside the Route tag