I am currently in the process of creating a single-page website. I have incorporated react-bootstrap for the navigation bar, but I am facing an issue where it is not rendering on the page. Despite not encountering any errors, the page remains blank.
Below 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;
The following 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;
Additionally, the content of my shop.js, learn.js, aboutus.js, and contact.js files are identical to their respective file names:
import React from 'react'
function learn() {
return (
<div>learn</div>
)
}
export default learn
I suspect that one of the issues may lie with the routes.
UPDATE: Upon further examination, I believe the problem might stem from Navbar.js since I can modify the body's color successfully, yet the Navbar doesn't appear to render.