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: