`The Bootstrap Navigation Bar is not functioning properly on the published website.`

My Bootstrap Offcanvas Example navigation bar functions perfectly in my local environment. However, when I upload my build to a live website, the navigation links result in a 404 Error, indicating that the page does not exist. Interestingly, the footer at the bottom of the page is able to properly link and load pages.

Below is the code for my Navbar:

import React from "react";
import logo from './logo_small.png';
import styled from 'styled-components';
import Button from 'react-bootstrap/Button';
import Container from 'react-bootstrap/Container';
Nav, Navbar NavDropdown, Offcanvas from 'react-bootstrap';
const Styles = styled.div`
    
  
  .test{
   color: black;
    &:hover{
      color: #30b849;
    }
  }
...

Here is my app.js code:

import {BrowserRouter as Router, Switch, Route} from "react-router-dom";
import Nav from './components/Nav';
...

function App() {
  return (
      <>

        <Router>
            <Nav/>
            <Switch>
                <Route path = '/' exact component={Home}/>
                ...
            </Switch>
        </Router>

      </>
  );
}

Live website link:

Answer №1

Make sure to use the href attribute only with <Nav.Link> elements instead of <NavDropdown.Item> elements.

Here's how you can modify the dropdowns:

<NavDropdown.Item >
    <Nav.Link href="/new-route">New Route</Nav.Link>
</NavDropdown.Item>

For more information, refer to the documentation at:

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

A variable in Javascript storing data about jQuery DOM elements

Currently, I am using the slick slider for my development (http://kenwheeler.github.io/slick/) In JavaScript, there is an event that returns a variable called 'slick' When I print the variable using console.log, this is what I see: https://i.s ...

Using JavaScript, add a complex JSON record to a JSON variable by pushing it

I have been attempting to insert a complex JSON data record into a JSON variable using the following code: var marks=[]; var studentData="student1":[{ "term1":[ {"LifeSkills":[{"obtained":"17","grade":"A","gp":"5"}]}, {"Work":[{"obtained":"13"," ...

Steps for creating a jQuery function that responds to changes in a text box value

Currently, I have a text box containing certain values and a submit button alongside a slider. When I click the submit button, the slider changes. However, I would like to achieve the functionality where instead of clicking the submit button, changing the ...

Ways to expand HTML input fields to fill the whole table cell

Currently working on a calculator project and I'm facing an issue with making a HTML button span the entire cell. I've managed to stretch the button horizontally but struggling to get it to fill the cell completely. Curious as to why setting widt ...

Discrepancy in Line Spacing in Internet Explorer 9 when Working with TextAreas

My TEXTAREA requires precise spacing, so I've set the formatting as shown below: TEXTAREA { font-family: Tahoma, Arial; font-size: 8pt; letter-spacing: 0px; line-height: 13px; } The issue arises when typing text into the textarea - the li ...

Exploring the process of exporting the Redux Form Field component

I'm currently working on automatically filling in a form's input values by using a function called load that is triggered when a button is clicked. I've encountered an issue while integrating redux form and attempting to use the Field compon ...

Is it necessary to specify breakpoints for positional properties in Material UI Grid Item? For example, for textAlign/text-align in my case

For more insight on this topic, check out: How to horizontally center an item in Material UI grid item? I've observed this behavior but couldn't find a clear explanation in the Grid documentation for material UI Essentially, I have a button ins ...

Identify when a browser tab is closed and determine which specific tab out of all the open tabs was closed

Is there a way to identify when a browser or tab is closed in Angular/JavaScript? I would like to know if there are specific events that can be used for detecting these actions. Any advice, information, or code examples on this topic would be greatly app ...

Obtain the full HTML code for a Facebook album

I am attempting to extract the HTML code from a Facebook album in order to retrieve the photo links. However, since not all photos load at once, cURL only retrieves the links of photos that are initially loaded. Is there a way to fetch the entire loaded H ...

Can the default GridTile styles be retained when image preloading is implemented?

GridTile applies specific styles to images in the children prop. However, when I use a preload wrapper, the styles are not being applied. You can find more information here. Is it possible to pass GridTile styles to the wrapped image without causing any o ...

React Native Videoplayer shows black screen instead of video playback

I have incorporated React-Native-Video-Processing into my project but when I run the code, the Videoplayer is not visible on the screen. Only audio is playing without the video. I am unsure why the Videoplayer is not showing up. Here are the versions of s ...

Tips for effectively utilizing the page-break property within CSS

I am faced with an issue on my HTML page where multiple angular material cards are being displayed: ... <mat-card class="mat-card-98"> <mat-card-header> <mat-card-title>THIS IS MY TITLE</mat-card-title> < ...

Tale Tome: The Documentation Enigma - Encountering a perplexing error where "classes" of undefined cannot be read in the Storybook Addon

I am currently using Storybook 5.2.6 for React 16.9.0 with Typescript 3.5.3 and implementing Material UI themed components. After setting up @storybook/addon-docs, I encountered an issue where the PropsTable on the Storybook Docs page displays a message sa ...

What strategies can be implemented to decrease the initial loading duration of a YouTube iframe video?

What are some techniques we can use to decrease iframe loading time? Is it possible to implement lazy loading for YouTube iframe videos? I experimented with initially hiding the iframe and displaying an image instead. However, when the user clicks, it req ...

Prevent Text Overflow in CSS, Material-UI, and React styling efforts

I am facing an issue where the cardTitle is overlapping the Card when the text is too long. Currently, I am manually setting a static maxWidth, but I would prefer for it to adjust based on the size of the Card. Is there a way to achieve this dynamically? ...

Is there a way to adjust the height of an image to be responsive in tailwind css?

<!-- this is the section with the services description and an image of an egg --> <!-- this is the first section with the description --> <div class="flex flex-1 flex-col items-center lg:items-start p-4"> &l ...

The static menu is malfunctioning and is disrupting the smooth operation of the website

I've created a custom Wordpress menu that should switch to a different layout when scrolling down. While the functionality works fine, I'm facing an issue where a portion of the page is lost every time the menu transitions from "relative" to fixe ...

Can I combine the col and d-flex classes in Bootstrap 5 without breaking any rules?

Is it possible to use both col and d-flex classes together? I want to center the element with the class "description" by combining them. <section class="container-fluid mb-5"> <div class="row"> <div class=&q ...

Trouble with the query waypoints extension in a simple demonstration

Can anyone help me figure out why the basic example from the waypoints plugin isn't working for me? Here's a link to the jsfiddle I created: http://jsfiddle.net/ZA8bd/2/ CSS .block1 { margin-top:30px; width: 400px; background: red; ...

I'm getting a CORS policy error in my browser. It's saying that there is no 'Access-Control-Allow-Origin' header present on the requested resource

I tried installing cors via npm and using the app.use(cors()); middleware, but unfortunately it did not resolve my issue. My frontend React App is running on Port localhost:3000. Access to the XMLHttpRequest at 'http://localhost:3087/authenticate-toke ...