Issue when implementing React Router DOM

After writing this code my output is coming full blank, no data are showing in my page.

This is my App.js file code:

import './App.css'; import React, { Component } from 'react' import NavBar from './Components/NavBar'; import News from './Components/News'; import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; export default class App extends Component { render() { return ( <div> <Router> <NavBar/> <Switch> <Route path="/"><News pageSize={5} country="in" category="general"/></Route> <Route path="/business"><News pageSize={5} country="in" category="business"/></Route> <Route path="/entertainment"><News pageSize={5} country="in" category="entertainment"/></Route> <Route path="/general"><News pageSize={5} country="in" category="general"/></Route> <Route path="/health"><News pageSize={5} country="in" category="health"/></Route> <Route path="/science"><News pageSize={5} country="in" category="science"/></Route> <Route path="/sports"><News pageSize={5} country="in" category="sports"/></Route> <Route path="/technology"><News pageSize={5} country="in" category="technology"/></Route> </Switch> </Router> </div> ) } }

This is my NavBar.js code:

import React, { Component } from 'react' import { Link } from "react-router-dom"; export class NavBar extends Component { render() { return ( <div> <nav className="navbar navbar-expand-lg bg-body-tertiary"> <div className="container-fluid"> <Link className="navbar-brand" to="/">NewsMonkey</Link> <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span className="navbar-toggler-icon"></span> </button> <div className="collapse navbar-collapse" id="navbarSupportedContent"> <ul className="navbar-nav me-auto mb-2 mb-lg-0"> <li className="nav-item"> <Link className="nav-link" aria-current="page" to="/">Home</Link> </li> <li className="nav-item"><Link className="nav-link" to="/Business">Business</Link></li> <li className="nav-item"><Link className="nav-link" to="/Entertainment">Entertainment</Link></li> <li className="nav-item"><Link className="nav-link" to="/General">General</Link></li> <li className="nav-item"><Link className="nav-link" to="/Health">Health</Link></li> <li className="nav-item"><Link className="nav-link" to="/Science">Science</Link></li> <li className="nav-item"><Link className="nav-link" to="/Sports">Sports</Link></li> <li className="nav-item"><Link className="nav-link" to="/Technology">Technology</Link></li> </ul> </div> </div> </nav> </div> ) } } export default NavBar

Error occurred in console:

installHook.js:1 An error occurred in the <BrowserRouter> component. Consider adding an error boundary to your tree to customize error handling behavior. Visit https://react.dev/link/error-boundaries to learn more about error boundaries.