title: Issues deploying to heroku path="/" path="/favicon.ico"
body: <p>Hoping someone might be able to help me with an issue I'm experiencing when pushing my react app to heroku. The heroku logs show the following errors repeatedly. </p>
  
  <blockquote>
    <p>at=error code=H10 desc="App crashed" method=GET path="/" host=jp-portfolio.herokuapp.com request_id=4841ef14-b2f2-4ae7-82d7-d47abf123db7 fwd="67.188.208.208" dyno= connect= service= status=503 bytes= protocol=https
    2020-04-02T06:42:02.631967+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=jp-portfolio.herokuapp.com request_id=552909aa-ff34-4a4d-91cc-c817938b39b7 fwd="67.188.208.208" dyno= connect= service= status=503 bytes= protocol=https</p>
  </blockquote>
  
  <p>To me it doesn't seem like it likes the way I've defined my routes on my app.js file so I changed my app.js file and added the router file to follow 
  <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> but it hasn't worked for me.</p>
  
  <p>and this</p>
  
  <p><a href="https://stackoverflow.com/questions/41226416/react-router-is-not-able-to-handle-routes-and-give-back-warning-of-did-not-match">React router is not able to handle routes and give back warning of did not match</a></p>
  
  <p>App.js File</p>
  
  <pre><code>import React, { Component } from 'react'
  
  class App extends Component {
  static propTypes = {
    children: PropTypes.node
  }
  
  render() {
    const { children } = this.props
    return (
      &lt;div&gt;
        {children}
      &lt;/div&gt;
    )
  }
  }
  
  export default App
  </code></pre>
  
  <p>My Package JSON</p>
  
  <pre><code>{
    "name": "jp-portfolio",
    "version": "0.1.0",
    "private": false,
    "dependencies": {
      "@fortawesome/fontawesome-svg-core": "^1.2.28",
      "@fortawesome/free-brands-svg-icons": "^5.13.0",
      "@fortawesome/free-solid-svg-icons": "^5.13.0",
      "@fortawesome/react-fontawesome": "^0.1.9",
      "@material-ui/core": "^4.9.7",
      "@material-ui/icons": "^4.9.1",
      "@material-ui/styles": "^4.0.0-rc.0",
      "@testing-library/jest-dom": "^4.2.4",
      "@testing-library/react": "^9.3.2",
      "@testing-library/user-event": "^7.1.2",
      "chart.js": "^2.9.3",
      "contentful": "^7.14.0",
      "history": "^4.10.1",
      "react": "^16.13.1",
      "react-chartjs-2": "^2.9.0",
      "react-d3-speedometer": "^0.10.1",
      "react-dom": "^16.13.1",
      "react-fontawesome": "^1.7.1",
      "react-router-dom": "^5.1.2",
      "react-scripts": "3.4.1",
      "typeface-roboto": "0.0.75"
    },
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject"
    },
    "eslintConfig": {
      "extends": "react-app"
    },
    "browserslist": {
      "production": [
        "&gt;0.2%",
        "not dead",
        "not op_mini all"
      ],
      "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
      ]
    }
  
  
  </code></pre>
  
  <p>Router.js</p>
  
  <pre><code>import React from 'react';
  import { BrowserRouter as Router, Route} from "react-router-dom";
  import Portfolio from "./pages/portfolio";
  import About from "./pages/about"
  import { useRouterHistory, Router } from 'react-router'
  import { createHistory } from 'history'
  
  const history = useRouterHistory(createHistory)({
      basename: '/test'
    })
  
  export default &lt;Router history={history} &gt;
    &lt;Route path="/" component={App}&gt;
      &lt;IndexRoute component={Portfolio}/&gt;
      &lt;Route path="/about" component={About}/&gt;
    &lt;/Route&gt;
  &lt;/Router&gt;
  </code></pre>
  
  <p>Runs locally. </p>
  
  <p>Has anyone experienced a similar issue and know how I might be able to resolve this? 
  Any help would be greatly appreciated! </p>