React router not rendering components anymore except the default one - reactjs

Question

I took a break from my project for a day and today I come back to and suddenly i have an issue with my react router. I was messing around with adding more components but deleted them and now my Homepage, about, or gallery component dont render when I change the page with then navbar. The url still changes if i click on gallery to /gallery but the <h1>Gallery page</h1> does not show up anymore.
App.js
import React, { Component } from 'react';
import './App.css';
import NavigationBar from './components/navbar';
import About from './components/About';
import Home from './components/homepage';
import Gallery from './components/gallery';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
class App extends Component {
state = {};
render() {
return (
<Router>
<div className="App">
<NavigationBar />
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/gallery" component={Gallery} />
</Switch>
</div>
</Router>
);
}
}
export default App;
Homepage
import '../css/homepage.scss';
class Homepage extends Component {
state = {};
render() {
return (
<div>
<h1>Hello</h1>
</div>
);
}
}
export default Homepage;
About
class About extends Component {
state = {};
render() {
return <h1>About</h1>;
}
}
export default About;
Gallery
class gallery extends Component {
state = {};
render() {
return <h1>Gallery page</h1>;
}
}
export default gallery;
Nav code
import React, { Component } from 'react';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import { link } from 'react-router-dom';
import { NavLink } from 'react-router-dom';
import '../css/navbar.scss';
import $ from 'jquery';
import logo from '../images/logo.png';
class NavigationBar extends Component {
state = {};
render() {
return (
<Navbar fixed="top" className="navbarr" bg="light" expand="sm">
<Navbar.Brand
activeClassName="nav-link--active"
className="BrandLink"
href="/"
>
<img
alt=""
src={logo}
width="45"
height="30"
className="d-inline-block align-top"
/>
BRAND NAME HERE
</Navbar.Brand>
<Navbar.Toggle />
<Navbar.Collapse className="justify-content-end">
<Nav className="ml-auto">
<Nav.Link
className="NavLink"
activeClassName="nav-link--active"
href="/About"
>
About
</Nav.Link>
<Nav.Link
className="NavLink"
activeClassName="nav-link--active"
href="/Gallery"
>
Gallery
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
}
export default NavigationBar;

Answer 1

Try moving your default route to the end of routes. i.e.
import React, { Component } from 'react';
import './App.css';
import NavigationBar from './components/navbar';
import About from './components/About';
import Home from './components/homepage';
import Gallery from './components/gallery';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
class App extends Component {
state = {};
render() {
return (
<Fragment>
<div className="App">
<NavigationBar />
</div>
<Router>
<Switch>
<Route path="/about" component={About} />
<Route path="/gallery" component={Gallery} />
<Route path="/" component={Home} />
</Switch>
</Router>
</Fragment>
);
}
}
export default App;
The problem is with you Navbar components. Try this one:
import React, { Component } from "react";
import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";
import { Link } from "react-router-dom";
import "../css/navbar.scss";
import $ from "jquery";
import logo from "../images/logo.png";
class NavigationBar extends Component {
state = {};
render() {
return (
<Navbar fixed="top" className="navbarr" bg="light" expand="sm">
<Navbar.Brand activeClassName="nav-link--active" className="BrandLink">
<Link to="/">
<img
alt=""
src={logo}
width="45"
height="30"
className="d-inline-block align-top"
/>
BRAND NAME HERE
</Link>
</Navbar.Brand>
<Navbar.Toggle />
<Navbar.Collapse className="justify-content-end">
<Nav className="ml-auto">
<Nav.Link className="NavLink" activeClassName="nav-link--active">
<Link to="/about">About</Link>
</Nav.Link>
<Nav.Link className="NavLink" activeClassName="nav-link--active">
<Link to="/gallery">Gallery</Link>
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
}
export default NavigationBar;