title: React Routing not working on Heroku Deployment
body: <p>I am trying to deploy my Full Stack React Application to Heroku but I am unable to load up other routes of my application. </p>
  
  <p>My App.js</p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
  
  // Pages
  // =================
  
  // Not Logged In
  import SplashPage from './Pages/SplashPage';
  import Login from './Pages/Login';
  import Signup from './Pages/Signup';
  import CohortSignup from './Pages/CohortSignup';
  
  // Logged In 
  import AdminHome from './Pages/AdminHome';
  import InstructorHome from './Pages/InstructorHome';
  import StudentHome from './Pages/StudentHome';
  import Settings from './Pages/Settings';
  
  import StudentProfile from './Components/StudentProfile';
  
  // No Page
  import NoPage from './Pages/NoPage';
  
  // Components
  import Navbar from './Components/Navbar';
  
  // Utils
  import API from './Utils/API';
  
  class App extends Component {
    state = {
      // We want to change this state based on User Login Credentials
      user: '',
      userType: '',
      loggedIn: false
    }
  
     // class functions go here
  
    render() {
  
      // If the user state login is true, allow them to navigate these pages
      if (this.state.loggedIn === true) {
        return (
          &lt;Router&gt;
            &lt;Navbar user={this.state.user} logout={this.logout} /&gt;
            &lt;Switch&gt;
              {this.state.userType === 'administrator' ? &lt;Route path='/' exact component={() =&gt; &lt;AdminHome user={this.state.user} /&gt;} /&gt; : ''}
              {this.state.userType === 'instructor' ? &lt;Route path='/' exact component={() =&gt; &lt;InstructorHome user={this.state.user} /&gt;} /&gt; : ''}
  
              {/* Path for student profile based on it */}
              &lt;Route exact path='/student/:id' exact component={StudentProfile} /&gt;
  
              {this.state.userType === 'student' ? &lt;Route path='/' exact component={() =&gt; &lt;StudentHome user={this.state.user} /&gt;} /&gt; : ''}
              &lt;Route exact path='/settings' exact component={() =&gt; &lt;Settings user={this.state.user} /&gt;} /&gt;
              &lt;Route component={NoPage} /&gt;
            &lt;/Switch&gt;
          &lt;/Router&gt;
        )
      } else {
        return (
          &lt;Router&gt;
            &lt;Switch&gt;
              &lt;Route exact path='/' exact component={SplashPage} /&gt;
              &lt;Route exact path='/login' exact component={Login} /&gt;
              &lt;Route exact path='/signup' exact component={Signup} /&gt;
  
              {/* Go to signup based on cohortID */}
              &lt;Route exact path='/signup/:id' exact component={CohortSignup} /&gt;
  
              &lt;Route component={NoPage} /&gt;
  
            &lt;/Switch&gt;
          &lt;/Router&gt;
        )
      }
    }
  }
  
  export default App;
  
  </code></pre>
  
  <p>server.js</p>
  
  <pre class="lang-js prettyprint-override"><code>// Allows us to place keys and sensitive info in hidden .env file
  require("dotenv").config();
  
  // Require Packages
  const express = require("express");
  const app = express();
  const db = require("./models");
  const routes = require("./routes");
  const passport = require("passport");
  const session = require("express-session")
  const path = require("path");
  
  const MySQLStore = require("express-mysql-session")(session);
  
  require("./config/passport")(passport)
  app.use(express.urlencoded({ extended: true }));
  app.use(express.json());
  
  let options = {};
  if (process.env.NODE_ENV === 'production') {
      app.use(express.static("client/build"))
      options = {
          host: process.env.HOST,
          port: 3306,
          user: process.env.USER,
          password: process.env.PASSWORD,
          database: process.env.DB
      }
  } else {
      options = {
          host: 'localhost',
          port: 3306,
          user: 'root',
          password: process.env.DB_PASSWORD,
          database: 'tracker'
      }
  }
  
  
  // Options for mysql session store
  
  let sessionStore = new MySQLStore(options);
  
  // Pass in mysql session store
  app.use(session({
      key: 'surfing_dogs',
      secret: 'surfing_dogs',
      store: sessionStore,
      resave: false,
      saveUninitialized: false
  }))
  
  app.use(passport.initialize());
  app.use(passport.session());
  
  app.use(express.static(__dirname));
  // app.use(express.static(path.join(__dirname, 'build')));
  
  app.use(routes)
  
  
  app.get('/*', function (req, res) {
      res.sendFile(path.join(__dirname, 'build', 'index.html'));
      // res.sendFile(path.resolve(__dirname + '/client/build/index.html'));
  });
  
  
  db.sequelize.sync({ force: false }).then(() =&gt; {
      let server = app.listen(process.env.PORT || 5000, function () {
          let port = server.address().port;
          console.log(`Server is listening on PORT ${port}`)
      })
  })
  
  </code></pre>
  
  <p>Here is the <a href="http://www.gittrack.ml/" rel="nofollow noreferrer">site link</a></p>
  
  <p>The initial root page loads up fine but when I try to access the /login or /signup route directly from the address bar it does not work</p>
  
  <p>Here is a link to the <a href="https://github.com/dchicchon/GitTrack" rel="nofollow noreferrer">Github Repository</a></p>
  
  <p>I have also looked at other Stack Overflow answers for my problem to no avail.</p>
  
  <p><a href="https://stackoverflow.com/questions/41772411/react-routing-works-in-local-machine-but-not-heroku">React Routing works in local machine but not Heroku</a>
  <a href="https://stackoverflow.com/questions/51866714/react-router-routes-dont-work-when-deployed-to-heroku">React Router Routes Don&#39;t work when deployed to Heroku</a></p>
  
  <p>The solutions in these suggest that I add a static.json and have an app.get() method that will redirect any route to my index.html due to react being a single page application. If anyone could guide me in the right direction I would be grateful!</p>