javascript - React router not working when deployed -

i new heroku , deployment. created project using create-react-app , using redux framework. having issue react router when deploying heroku. when click on links in app, router works, when refresh page, throws 404 not found error.

this index.js

import { router, route, browserhistory, indexroute } 'react-router' import { synchistorywithstore } 'react-router-redux' import { provider } 'react-redux' import reactdom 'react-dom' import react 'react'  import app './containers/app' import configure './store' import dashboard './components/v1/dashboard/dashboard'; import login './components/v1/login/login';  const store = configure(); const history = synchistorywithstore(browserhistory, store);  reactdom.render(   <provider store={store}>     <router history={history}>       <route path="/" component={app}>         <indexroute component={login} />         <router path="/dashboard" component={dashboard}/>       </route>     </router>   </provider>,   document.getelementbyid('root') ) 

this webpack.config.prod.js

'use strict';  var autoprefixer = require('autoprefixer'); var webpack = require('webpack'); var htmlwebpackplugin = require('html-webpack-plugin'); var extracttextplugin = require('extract-text-webpack-plugin'); var manifestplugin = require('webpack-manifest-plugin'); var interpolatehtmlplugin = require('react-dev-utils/interpolatehtmlplugin'); var paths = require('./paths'); var getclientenvironment = require('./env');   var publicpath = paths.servedpath; var shoulduserelativeassetpaths = publicpath === './'; var publicurl = publicpath.slice(0, -1); var env = getclientenvironment(publicurl);  if (env.stringified['process.env'].node_env !== '"production"') {   throw new error('production builds must have node_env=production.'); }  const cssfilename = 'static/css/[name].[contenthash:8].css'; const extracttextpluginoptions = shoulduserelativeassetpaths   ? { publicpath: array(cssfilename.split('/').length).join('../') }   : undefined;  module.exports = {   bail: true,   devtool: 'source-map',   entry: [     require.resolve('./polyfills'),     paths.appindexjs   ],   output: {     path: paths.appbuild,     filename: 'static/js/[name].[chunkhash:8].js',     chunkfilename: 'static/js/[name].[chunkhash:8].chunk.js',     publicpath: publicpath   },   resolve: {     fallback: paths.nodepaths,     extensions: ['.js', '.json', '.jsx', ''],     alias: {       'react-native': 'react-native-web'     }   },    module: {     preloaders: [       {         test: /\.(js|jsx)$/,         loader: 'eslint',         include: paths.appsrc       }     ],     loaders: [       {         exclude: [           /\.html$/,           /\.(js|jsx)$/,           /\.css$/,           /\.scss$/,           /\.json$/,           /\.(jpe?g|png|gif|svg)$/i         ],         loader: 'url',         query: {           limit: 10000,           name: 'static/media/[name].[hash:8].[ext]'         }       },       {         test: /\.(js|jsx)$/,         include: paths.appsrc,         loader: 'babel',        },       {         test: /\.css$/,         loader: extracttextplugin.extract(           'style',           'css?importloaders=1&modules&localidentname=[name]__[local]___[hash:base64:5]!postcss',           extracttextpluginoptions         )       },       {         test: /\.scss$/,         loaders: ["style", "css", "sass"]       },       {         test: /\.json$/,         loader: 'json'       },       {         test: /\.(jpe?g|png|gif|svg)$/i,         loader: 'file',         query: {           name: 'static/media/[name].[hash:8].[ext]'         }       }     ]   },    postcss: function() {     return [       autoprefixer({         browsers: [           '>1%',           'last 4 versions',           'firefox esr',           'not ie < 9', // react doesn't support ie8 anyway         ]       }),     ];   },   plugins: [     new interpolatehtmlplugin(env.raw),     new htmlwebpackplugin({       inject: true,       template: paths.apphtml,       minify: {         removecomments: true,         collapsewhitespace: true,         removeredundantattributes: true,         useshortdoctype: true,         removeemptyattributes: true,         removestylelinktypeattributes: true,         keepclosingslash: true,         minifyjs: true,         minifycss: true,         minifyurls: true       }     }),     new webpack.defineplugin(env.stringified),     new webpack.optimize.occurrenceorderplugin(),     new webpack.optimize.dedupeplugin(),     new webpack.optimize.uglifyjsplugin({       compress: {         screw_ie8: true, // react doesn't support ie8         warnings: false       },       mangle: {         screw_ie8: true       },       output: {         comments: false,         screw_ie8: true       }     }),     new extracttextplugin(cssfilename),     new manifestplugin({       filename: 'asset-manifest.json'     })   ],   node: {     fs: 'empty',     net: 'empty',     tls: 'empty'   } }; 

and package.json

{   "name": "olep2",   "version": "0.1.0",   "private": true,   "dependencies": {     "draft-js": "^0.10.0",     "draft-js-export-html": "^0.5.2",     "es6-promise": "^4.0.5",     "express": "^4.15.2",     "jquery": "^3.1.1",     "lodash": "^4.17.4",     "moment": "^2.17.1",     "react": "^15.5.4",     "react-bootstrap": "^0.30.7",     "react-day-picker": "^5.0.0",     "react-dom": "^15.5.4",     "react-fontawesome": "^1.5.0",     "redux-thunk": "^2.2.0",     "requirejs": "^2.3.2"   },   "devdependencies": {     "classnames": "^2.2.3",     "cross-env": "^4.0.0",     "css-loader": "0.26.1",     "es6-promise": "^4.0.5",     "file-loader": "0.10.0",     "image-webpack-loader": "^3.2.0",     "node-sass": "^4.5.0",     "npm-run-all": "^4.0.2",     "postcss-loader": "1.2.2",     "prop-types": "^15.5.4",     "react-hot-loader": "^1.3.0",     "react-redux": "^4.4.0",     "react-router": "^2.0.0",     "react-router-redux": "^4.0.0",     "redux": "^3.3.1",     "redux-actions": "^0.9.1",     "rucksack-css": "^0.8.5",     "sass-loader": "^6.0.2",     "style-loader": "0.13.1",     "autoprefixer": "6.7.2",     "babel-core": "6.22.1",     "babel-eslint": "7.1.1",     "babel-jest": "18.0.0",     "babel-loader": "6.2.10",     "babel-preset-react-app": "^2.2.0",     "babel-runtime": "^6.20.0",     "case-sensitive-paths-webpack-plugin": "1.1.4",     "chalk": "1.1.3",     "connect-history-api-fallback": "1.3.0",     "cross-spawn": "4.0.2",     "detect-port": "1.1.0",     "dotenv": "2.0.0",     "eslint": "3.16.1",     "eslint-config-react-app": "^0.6.2",     "eslint-loader": "1.6.0",     "eslint-plugin-flowtype": "2.21.0",     "eslint-plugin-import": "2.0.1",     "eslint-plugin-jsx-a11y": "4.0.0",     "eslint-plugin-react": "6.4.1",     "extract-text-webpack-plugin": "1.0.1",     "fs-extra": "0.30.0",     "html-webpack-plugin": "2.24.0",     "http-proxy-middleware": "0.17.3",     "jest": "18.1.0",     "json-loader": "0.5.4",     "object-assign": "4.1.1",     "promise": "7.1.1",     "react-dev-utils": "^0.5.2",     "url-loader": "0.5.7",     "webpack": "1.14.0",     "webpack-dev-server": "1.16.2",     "webpack-manifest-plugin": "1.1.0",     "whatwg-fetch": "2.0.2"   },   "scripts": {     "start": "node scripts/start.js ",     "build": "node scripts/build.js",     "test": "node scripts/test.js --env=jsdom"   },   "jest": {     "collectcoveragefrom": [       "src/**/*.{js,jsx}"     ],     "setupfiles": [       "<rootdir>/config/polyfills.js"     ],     "testpathignorepatterns": [       "<rootdir>[/\\\\](build|docs|node_modules|scripts)[/\\\\]"     ],     "testenvironment": "node",     "testurl": "http://localhost",     "transform": {       "^.+\\.(js|jsx)$": "<rootdir>/node_modules/babel-jest",       "^.+\\.css$": "<rootdir>/config/jest/csstransform.js",       "^(?!.*\\.(js|jsx|css|json)$)": "<rootdir>/config/jest/filetransform.js"     },     "transformignorepatterns": [       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"     ],     "modulenamemapper": {       "^react-native$": "react-native-web"     }   },   "babel": {     "presets": [       "react-app"     ]   },   "eslintconfig": {     "extends": "react-app"   } } 

the problem webserver serving "index.html" root route ("/")

you have configure webserver in way routes (or ones using) serve index.hml

read more information heroku buildpack create-react-app: static hosting react.js web apps