React Navbar isn't rendering in React js

Question

I am trying to make single page website. I have used react bootstrap for the nav bar and I am trying to figure out why it isn't rendering. I am not getting any errors just the page being blank.

Here is my code for App.js

import React from 'react';
import Navbar from "../components/Navbar/navbar"
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import "./App.css";
import Shop from './shop';
import Learn from './learn';
import Aboutus from './aboutus';
import Contactus from './contactus';

function App(){

  return (
  <>
  <Router>
    <div>
      <Navbar />
      <div className='contitle'>
        <h1>hi</h1>
      </div>
      <Routes>
      <Route path="/shop" element={<Shop/>} />
      <Route path="/aboutus" element={<Aboutus/>} />
      <Route path="/contactus" element={<Contactus/>} />
      <Route path="/learn" element={<Learn/>} />
    </Routes>
    </div>

  </Router>
  </>
  );
}
export default App;

Here is my navbar.js code:

import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import 'bootstrap/dist/css/bootstrap.min.css';
import Navbar from 'react-bootstrap/Navbar';
import "../Navbar/navbar.css";
import instalogo from "../assets/instalogo.png";
import discordlogo from "../assets/discordlogo.png";
import youtubelogo from "../assets/youtubelogo.png";
import '../fonts/ETAluminiumB.ttf' ;
import '../fonts/ETAluminiumA.ttf' ;





function CollapsibleExample() {
  return (
    
<Navbar bg="black" className="justify-content-center">
        <Container>
          <Nav >
          <Navbar.Brand href="#home" >
          <Nav.Link href="#instagram" > <img className="instalogo" src={instalogo} /></Nav.Link>
          <Nav.Link href="#discord" > <img className="instalogo" src={discordlogo} /></Nav.Link>
          <Nav.Link href="#youtube" > <img className="youtubelogo" src={youtubelogo} /></Nav.Link>
          
              
            <h1 className='color'>WeTech</h1>
          </Navbar.Brand>
          </Nav>
          <Nav className="mr-auto">
    
    <Nav.Link href="#shop" ><p className="linkText">Shop</p></Nav.Link>
    <Nav.Link href="#learn" ><p className="linkText">Learn</p></Nav.Link>
    
  </Nav>
  <Nav>
    <Nav.Link href="#about" ><p className="linkText">  About</p></Nav.Link>
    <Nav.Link href="#contactus" ><p className="linkText">Contact us</p></Nav.Link>
  </Nav>
        </Container>
      </Navbar>
     
    

      
  );
  
}

export default CollapsibleExample;

and my shop.js, learn.js, aboutus.js, and my contacts.js look like this(with each one named to their file name):

import React from 'react'

function learn() {
  return (
    <div>learn</div>
  )
}

export default learn

I also suspect that one of the issues is because of my routes.

EDIT: I think it could be an issue with the Navbar.js since I am able to change the color of the body, but still the Navbar is not rendering.

try renaming your navbar file to index and then fixing the import — Robin Mehra
– Robin Mehra, Commented Jul 20, 2022 at 7:05

Firofa · Accepted Answer · 2022-07-20 04:04:00Z

2

In your App.js From this:

import Navbar from "../components/Navbar/navbar"

To This:

import CollapsibleExample as Navbar from "../components/Navbar/navbar"

I wish it help...

answered Jul 20, 2022 at 4:04

Firofa

1179 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mrsir217 Over a year ago

Thank you for pointing out my error. Although I corrected it, I'm still getting a blank page :(

Firofa Over a year ago

Maybe try change your function name in navbar.js to "Navbar" rather than "CollapsibleExample" i guess..., then export it as Navbar, If you do it change back your import in app.js to: import Navbar from "../components/Navbar/navbar")

mrsir217 Over a year ago

Still didn't work for me :(. I'm going to try to rebuild this from the ground up. Thank you for your help :)

heysinghaaa · Accepted Answer · 2022-07-21 09:54:09Z

0

Try to simplify your code like this.

App.js

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

index.js

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

answered Jul 21, 2022 at 9:54

heysinghaaa

695 bronze badges

Collectives™ on Stack Overflow

React Navbar isn't rendering in React js

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related