React JS Development Build Showing a White Screen - reactjs

Question

I am using a MacBook Pro with Big Sur 11.6.4 and with Node 17.6.0. Before the White Screen my Code was like this:
Navbar.component.jsx
import React from 'react';
import {
Nav,
NavLink,
Bars,
NavMenu,
NavBtn,
NavBtnLink,
} from './NavbarElements';
const Navbar = () => {
return (
<>
<Nav>
<Bars />
<NavMenu>
<NavLink to='/' activeStyle>
Home
</NavLink>
<NavLink to='/about' activeStyle>
About
</NavLink>
<NavLink to='/browse' activeStyle>
Browse
</NavLink>
<NavLink to='/sign-up' activeStyle>
Sign Up
</NavLink>
</NavMenu>
<NavBtn>
<NavBtnLink to='/signin'>Sign In</NavBtnLink>
</NavBtn>
</Nav>
</>
);
};
export default Navbar
App.js
import React, { Component } from 'react';
import Navbar from './Components/Navbar/Navbar.component';
import Button from '#mui/material/Button'
import logo from './logo.svg';
import { BrowserRouter as Router } from 'react-router-dom';
import './App.css';
import Footer from './Components/Footer';
class App extends Component {
render() {
return (
<div className="App">
<Router><Navbar /></Router>
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
<Button variant="contained">Learn React</Button>
</a>
</header>
<Footer/>
</div>
)
}
}
export default App;
When I made some changes afterwards when I decided to add some routing to the Navbar.jsx file making it look like this:
import React from 'react';
import {
Nav,
NavLink,
Bars,
NavMenu,
NavBtn,
NavBtnLink,
} from './NavbarElements';
import { BrowserRouter as Route, Routes } from "react-router-dom";
import ReactDOM from 'react-dom'
import Browse from '../../Pages/Browse/Browse'
import About from '../../Pages/About/About'
const Navbar = () => {
return (
<>
<Nav>
<Bars />
<NavMenu>
<NavLink to='/' activeStyle>
Home
</NavLink>
<NavLink to='/about' activeStyle>
About
</NavLink>
<NavLink to='/browse' activeStyle>
Browse
</NavLink>
<NavLink to='/sign-up' activeStyle>
Sign Up
</NavLink>
</NavMenu>
<NavBtn>
<NavBtnLink to='/signin'>Sign In</NavBtnLink>
</NavBtn>
<Routes>
<Route path="/" />
<Route path="/about" element={<About />} />
<Route path="/browse" element={<Browse />} />
</Routes>
</Nav>
</>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<Navbar />, rootElement);
export default Navbar
Error Part 1
Error Part 2
Is there anything I can do to fix this?
Im Sorry if this is a silly mistake. I am just starting to learn react. My apologies if this might feel like a waste of time.

Answer 1

I fixed it.
STEP 1
I just had to remove all other instance of <Route path='' element={}> and anything related to it on other files in the project.
STEP 2
Next, I needed to reformat the App.js making it look like this:
import {BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from './Pages/Home/Home.jsx';
import Browse from './Pages/Browse/Browse.jsx'
import About from './Pages/About/About.jsx'
import Footer from "./Components/Footer.jsx";
import Navbar from "./Components/Navbar/Navbar.component.jsx";
import './App.css';
function App() {
return (
<Router>
<Navbar />
<Routes>
<Route path='/' exact component={<Home/>} />
<Route path='/browse' component={<Browse/>} />
<Route path='/about' component={<About/>} />
</Routes>
<Footer/>
</Router>
);
}
export default App;
RESULT
I ended up with two errors left and one GOOD warning:
Warning
So, Thats it.