My react app breaks to a 404 when a person uses a specific route on the custom heroku link of the url, but refreshes fine with regular heroku link

Question

My app is using the react router

import React, { Component } from 'react';
import './App.css';
import Footer from './components/Footer'
import Header from './components/Header'
import Index from './components/Index'
import ContactForm from './components/ContactForm'
import ProjectPage from './components/ProjectPage'
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

class App extends Component {
  render() {
    return (
    <Router>
        <div>
          <Header />
            <Route exact path='/' component={Index} />
            <Route exact path='/contact' component={ContactForm} />
            <Route exact path='/project' component={ProjectPage} />
        </div>

    </Router>
    );
  }
}

export default App;

When i use the regular heroku app and I am on the project or contact route, if a user refreshes the browser, the page will reload fine, but if they use my custom url, and refresh the page on that same route, the site will break to a 404. link examples https://agile-mesa-41419.herokuapp.com/ jdiperi.com