Nothing showing up when I use router in react js

Solution 1:

In JSX, lower-case tag names are considered to be HTML tags. That's why you need to capitalize the name of your navbar component otherwise react.js won't treat it like other valid JSX. It should be imported as Navbar.

So, your App.js will look something like this.

import React from 'react';
import './App.css';
import Navbar from './components/navbar';
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';

function App() {
  return (
    <Router>
      <Navbar />
      <Routes>
        <Route path="/" element={<Navbar/>}/>
      </Routes>
    </Router>
    
    
  );
}

export default App;