Bootstrap Navigation Bar doesn't work on live website - html

Question

My navigation bar which I created using Bootstrap Offcanvas Example works perfectly fine in my local environment. But after uploading my build to a live website the navigation links lead to a 404 Error saying the page does not exist. However, my footer at the bottom is able to link and load pages properly.
Here is 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';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
import Offcanvas from 'react-bootstrap/Offcanvas';
const Styles = styled.div`
.test{
color: black;
&:hover{
color: #30b849;
}
}
.button{
background-color: #30b849;
color: white;
padding: 5px 10px;
border: 1px solid #30b849;
transition: all 0.3s ease-out;
margin-right: 5%;
&:hover{
background: #000066;
color: white;
transition: all 0.3s ease-out;
}
}
.nav-item.dropdown:hover .dropdown-menu {
display: block;
}
.logo{
margin-left: 10%;
}
`;
function OffcanvasExample() {
return (
<Styles>
{['xl'].map((expand) => (
<Navbar key={expand} bg="white" expand={expand} className="navbar">
<Container fluid>
<Navbar.Brand href="/"><img className='logo' src={logo} alt="Depo App Logo"/></Navbar.Brand>
<Navbar.Toggle aria-controls={`offcanvasNavbar-expand-${expand}`} />
<Navbar.Offcanvas
id={`offcanvasNavbar-expand-${expand}`}
aria-labelledby={`offcanvasNavbarLabel-expand-${expand}`}
placement="end"
>
<Offcanvas.Header closeButton>
<Offcanvas.Title id={`offcanvasNavbarLabel-expand-${expand}`}>
<img src={logo} alt="Depo App Logo"/>
</Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body>
<Nav className="justify-content-lg-end flex-grow-1">
<Nav.Link href="/" className="ps-3 pe-5 fs-5">Home</Nav.Link>
<NavDropdown
href = "/"
className="ps-3 pe-5 fs-5"
title="App"
id={`offcanvasNavbarDropdown-expand-${expand}`}
renderMenuOnMount={true}
>
<NavDropdown.Item href="/our-app">Our App</NavDropdown.Item>
<NavDropdown.Item href="/lawyers">Lawyers</NavDropdown.Item>
<NavDropdown.Item href="/freelancers">Freelancers</NavDropdown.Item>
</NavDropdown>
<NavDropdown
className="ps-3 pe-5 fs-5"
title="Company"
id={`offcanvasNavbarDropdown-expand-${expand}`}
renderMenuOnMount={true}
>
<NavDropdown.Item href="/about-us">About Us</NavDropdown.Item>
<NavDropdown.Item href="/contact-us" >Contact Us</NavDropdown.Item>
<NavDropdown.Item href="/tech-support">Tech Support</NavDropdown.Item>
</NavDropdown>
</Nav>
<Nav.Link href="/sign-in" className="fs-5">Sign In</Nav.Link>
<Button href="/sign-up" className="button fs-5" >Sign Up</Button>
</Offcanvas.Body>
</Navbar.Offcanvas>
</Container>
</Navbar>
))}
</Styles>
);
}
export default OffcanvasExample;
Here is the app.js:
import {BrowserRouter as Router, Switch, Route} from "react-router-dom";
import Nav from './components/Nav';
import './App.css';
import Home from './components/pages/Home/Home'
import SignIn from './components/SignIn/Form'
import SignUp from './components/SignUp/Form'
import Lawyer from "./components/pages/Lawyers/Lawyers";
import Freelancer from "./components/pages/Freelancers/Freelancers";
import About_Us from "./components/pages/About_Us/About_Us";
import Our_App from "./components/pages/Our_App/Our_App";
import Contact_Us from "./components/pages/Contact_Us/Contact_Us";
import Tech_Support from "./components/pages/Tech_Support/Tech_Support";
import Terms_Of_Use from "./components/pages/Terms_Of_Use/Terms_Of_Use";
import Privacy_Policy from "./components/pages/Privacy_Policy/Privacy_Policy";
function App() {
return (
<>
<Router>
<Nav/>
<Switch>
<Route path = '/' exact component={Home}/>
<Route path = '/sign-up' component={SignUp}/>
<Route path = '/sign-in' component={SignIn}/>
<Route path = '/lawyers' component={Lawyer}/>
<Route path = '/freelancers' component={Freelancer}/>
<Route path = '/about-us' component={About_Us}/>
<Route path = '/our-app' component={Our_App}/>
<Route path = '/contact-us' component={Contact_Us}/>
<Route path = '/tech-support' component={Tech_Support}/>
<Route path = '/terms-of-use' component={Terms_Of_Use}/>
<Route path = '/privacy-policy' component={Privacy_Policy}/>
</Switch>
</Router>
</>
);
}
export default App;
Here is a link to the live website: https://thedepoapp.com/
Thanks for the help!

Answer 1

You are using the hrefs on a <NavDropdown.Item> you should be using hrefs only on <Nav.Link> components.
You can alter the dropdowns to these:
<NavDropdown.Item >
<Nav.Link href="/other-route">Other Route</Nav.Link>
</NavDropdown.Item>
See the docs for more details: https://react-bootstrap.github.io/components/navs/#using-dropdowns