The React Navbar fails to appear when using React JS

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.

Answer №1

Changing App.js Code:

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

To the following:

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

Hoping this modification proves useful...

Answer №2

Here is an example of how you can simplify your code:

MainApp.js

function MainApp() {
  return (
    <>
      <Header />
      <Content>
        <Section path="/" element={<Home/>}>
        <Section path="projects" element={<Projects/>}/>
      </Content>
    </>
  );
}

index.js

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing the current state within a React callback function closure: A guide to maximising efficiency

I'm currently working on a web page that features a dynamic list of form inputs. Users have the ability to add or remove input fields using designated buttons. To manage this functionality, I've created a parent object called <Ingredients /> ...

Style prop in React components

I am currently utilizing the text-fields component from UI Materials found at this link. I'm looking to customize the style of the helper text associated with this component. https://i.stack.imgur.com/eDwXD.png My attempt so far: pstyle = { "& ...

Is it acceptable to duplicate and replace content directly from the Google Inspector tool?

As I work on creating a new woocommerce checkout page, I encountered some issues. My approach to extracting code from woocommerce involved inspecting the Code and copying it directly into my checkout file at /woocommerce/checkout/checkout.php. Is this met ...

Having trouble locating the code for adding a hover effect to the FontAwesome icon

In regards to my portfolio located here: My Portfolio When hovering over the "Marketing Automation" section, a small fa fa-tablet icon appears to the left which turns blue when hovered over. I would like for this icon to remain white, rather than changing ...

Aligning two images vertically using the display: table-cell property

I'm trying to align two images vertically using CSS' display: table-cell property, but it doesn't seem to be working even after specifying the height. <div style='display: table;height:500px'> <div style=' displa ...

What steps can be taken to avoid including empty tasks in React code?

Is there a way to prevent my application from adding empty tasks? Below is the code snippet for adding a new task to an array. How can I implement a condition to block the addition of empty tasks? This application follows Mozilla's guidelines for a R ...

Tips for determining if an item in one array is present in a different array

Looking for a way to disable a button using React code? Take a look at the snippet below: todos.filter(todo => todo.completed === true) .map(todo => todo.id) .includes(this.state.checkedIds) But there's a catch - it always seems to return ...

Allow only specific inner divs to dictate the width of the outer div

I'm working with the following HTML structure: <div id="container"> <div id="block1"> <img src="someimage/path" /> </div> <div id="block2"> Some Text </div> <div id="block3"&g ...

Enhance your UI experience with a beautifully styled button using Material-

I was using a Material UI button with a purple background. <Button component={Link} to={link} style={{ background: '#6c74cc', borderRadius: 3, border: 0, color: 'white', heig ...

Currently, my main focus is on finding a solution to adjusting the background color of the div element named *topnav* to properly match the width of the

I'm having trouble adjusting the width of the topnav background color to fill the entire page without any gaps. I hope that makes sense. Let me know if you need more information. Page displaying gap: Here is the HTML and CSS code: body {background ...

Once I incorporated Bootstrap into my project, I noticed a noticeable white space between the div elements

Welcome to My Code Playground I was sailing smoothly with my project until I decided to include Bootstrap. Seems like there's something missing in the details, so here I am reaching out. If you spot the issue, please feel free to correct my code. &l ...

Using React's useState hook with an array of objects

When I have 3 different inputs, my goal is to capture their states while updating the onChange input attribute. The desired state format should be structured as follows: [{lang: (inputName), text: (inputValue)}, ..]. This is what I attempted: function onC ...

Can you explain the significance of triple brackets (e.g. {{{ content }}}) in the context of Javascript/Typescript?

As I delve into the code of a fresh project in which I hope to contribute, I have come across numerous methods defined with triple brackets, like so: deinitialize() {{{ this.destroyed = true; $(window).off("resize", this.resize as () => void); ...

What is the best way to center align my horizontal subnav?

I am currently working on a horizontal navbar with horizontal submenus. One issue I am facing is getting the elements in mysubnav to align centrally instead of being pushed to the left all the time. If you need a visual representation of what I mean, plea ...

Enable Row Editing with a Click in Material Table

Utilizing the material-table library, I am implementing a feature to enable table rows to be editable upon double-click. The goal is for clicking on a row to trigger the same action as clicking the edit button located in the actions column on the leftmost ...

Latest versions of Bootstrap are facing issues with the functionality of the Carousel feature

I'm struggling to create a basic carousel, but for some reason, it's not functioning properly. I attempted to use the sample code provided by Bootstrap's documentation, but it doesn't behave as expected (slides won't transition and ...

Sorting through: A producer submerged yielded a fresh outcome *while also* revising its initial version. Opt to yield a fresh outcome *or* revamp the initial version

In my project, I am using an API to retrieve user data from the database. The API response includes two variables - "isActive" and "isVerified". These variables help me determine how to display the data on the interface. If both variables are false, it me ...

The onChange function in React JS for a Material UI 'number' TextField retains the previous value

In this element, I have an onChange function: <TextField id="rowinput" type="number" defaultValue={this.defaultRows} // defaultRows = 1 inputProps={{ min: "1", max:"5"}} onChange= ...

Are there any jQuery plugins available that animate elements as the page is scrolled?

Looking for a library that can create entry animations for elements as the page is scrolled? I previously used the animate it library, which was great - lightweight and easy to use. However, it doesn't seem compatible with the latest jQuery version (3 ...

Adding the BETA symbol to your Bootstrap navbar is simple and can be done by

Is there a way to include a "BETA" symbol at the top of the "Brand Name" on my Navbar, similar to the "TM" symbol? How can this be achieved? ...