Nothing showing up when I use router in react js-CodePudding

I am struggling to see why nothing shows up when I use a router in my project (Just a blank screen). I simply installed react-router-dom as normal. I have tried changing the versions but haven't had any success

Here is the app.js file

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;

And here is the navbar.js file:

import React, {useState} from 'react';
import { Link } from 'react-router-dom';
 
 function navbar() {
   return (
   <nav className='navbar'>
       <div className="navbar-container">
           <Link to='/' className='navbar-logo'>
                TRL<i className='fab fa-typo3'/>
           </Link>

       </div>



   </nav>
   );
 }
 
 export default navbar;

CodePudding user response：

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;

CodePudding user response：

Try to make the navbar component capital as Navbar , you can also pass element={Navbar} directly.

You need to Capitalize the name of your component for the JSX to understand it. JSX won't know if that is an HTML tag or a valid JSX in this case a component.

Nav js

 import React, {useState} from 'react';
 import { Link } from 'react-router-dom';

 function Navbar() {
  return (
    <nav className='navbar'>
       <div className="navbar-container">
           <Link to='/' className='navbar-logo'>
             TRL<i className='fab fa-typo3'/>
           </Link>
       </div>
    </nav>
   );
  }

 export default Navbar;

App js

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;