One way you can try to fix this is by replacing Switch
with HashRouter
in your App.js . This will change your URLs, but it should fix your 404 issue for github pages. If you need a more in depth explanation of why this happens read this reply.
So your updated App.js
should look like this:
import React, { Component } from "react";
import { HashRouter, Route } from "react-router-dom";
import Emoji from "react-emoji-render";
import "./App.css";
//Pages
import Projects from "./Projects.js";
import About from "./About.js";
import Critterpedia from "./Critterpedia.js";
import Bluenotes from "./Bluenotes.js";
import Formally from "./Formally.js";
//Components
import visualize from "./Images/visualize-actualize.png";
import ScrollToTop from "./ScrollToTop.js";
class App extends Component {
render() {
return (
<div>
<ScrollToTop />
<HashRouter>
<Route exact path="/" component={Projects} />
<Route path="/about" component={About} />
<Route path="/critterpedia" component={Critterpedia} />
<Route path="/bluenotes" component={Bluenotes} />
<Route path="/formally" component={Formally} />
</HashRouter>
<div className="footer">
<div className="emoji">
<Emoji text="" />
</div>
<div className="intro-icon">
<div className="img-div">
<img src={visualize} alt="visualize and actualize" />
</div>
</div>
<div className="credit">
<div className="footer-links">
<a href="https://github.com/christinexlin">GitHub</a>
<a href="https://www.linkedin.com/in/christine-lin-01/">
LinkedIn
</a>
<a href="https://twitter.com/christinexlin">Twitter</a>
</div>
<p>
Made with <Emoji text="" />
by Christine Lin
</p>
</div>
</div>
</div>
);
}
}
export default App;
Let me know if this works for you