How to handle routes Heroku Create React App with express? - node.js

Question

I have a create-react-app project which proxies a node express server at port 5000.
When we deploy it locally, all the requests get routed from client to the backend server and intermediate pages get rendered properly.
However, when I deploy it to Heroku, the flow always has to start from / route as any other URL directly hits the express server instead of being routed from front end.
Eg: https://consumesafe-dev.herokuapp.com works
But https://consumesafe-dev.herokuapp.com/dashboard goes directly to the node server instead of being proxied from front end.
here is the package.json for server:
{
"name": "example-create-react-app-express",
"version": "1.0.0",
"scripts": {
"client": "cd client && yarn start",
"server": "nodemon server.js",
"test": "cd client && npm install && yarn test",
"dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
},
"dependencies": {
"#google-cloud/language": "^1.0.0",
"#google-cloud/vision": "^0.12.0",
"async": "^2.6.0",
"body-parser": "~1.4.2",
"express": "^4.16.2",
"google-cloud": "^0.57.0",
"https": "^1.0.0",
"method-override": "~2.0.2",
"nodemon": "^1.17.3",
"pg": "^7.4.1",
"request": "^2.83.0",
"sequelize": "^4.37.2",
"winston": "^2.4.1"
},
"devDependencies": {
"concurrently": "^3.5.1"
}
}
and the package.json from client:
{
"name": "example-create-react-app-express",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:5000/",
"dependencies": {
"bootstrap": "^3.3.7",
"firebase": "^3.6.1",
"material-ui": "^0.20.0",
"react": "^16.2.0",
"react-checkbox-group": "^4.0.1",
"react-dom": "^16.2.0",
"react-event-timeline": "^1.5.1",
"react-notification-system": "^0.2.17",
"react-router-dom": "^4.2.2"
},
"devDependencies": {
"react-scripts": "1.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}