react-router does not work in production and surge deployments

This issue happens on all single page applications (e.g. react, angular). Follow below steps to resolve (only 4 surge):

1. npm run build
2. cd build
3. cp index.html 200.html
4. surge

Changing .htaccess file in the case of using apache as the web server in your build folder worked for me:

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

This is happening because users aren't being served the index.html which bootstraps your app when they visit those URLs directly.

For surge, you can add a 200.html file which contains the same contents as the index.html you're deploying (or just rename it to 200.html) - this will then be served to users at any URL they visit which doesn't correspond to a static file, allowing your app to start running.

---

Edit: looks like you're using create-react-app. This works when you're developing locally because create-react-app's react-scripts package handles serving your index.html as a fallback for these requests.

The react-scripts user guide has sections on how to handle this when deploying to GitHub Pages and surge.sh (as above).