Unable to access subroutes and home page in yarn build React app

Question

I'm trying to deploy a React app to the public site and everything works ok on localhost. When I put the website up and go to the url (i.e. www.something.com), the home page renders fine including static assets.

Then, when I created an .htaccess file containing:

FallbackResource /

The subroutes all render fine (static assets incl js, css, images), but the home page errors with a 502 Bad Gateway.

However, when I go to a subroute (i.e. www.something.com/about), it 404s.

• I built using yarn build
• I'm using "react-router-dom": "^5.1.2"
• I set up the app using create-react-app
• package.json contains "homepage": "."

What am I doing wrong here?

Answer 1

This question ended up being answered by .htaccess rewrite to redirect root URL to subdirectory

I redirected to the homepage as in the example and kept my FallbackResource defined.

RewriteEngine On
RewriteRule ^$ /index.html [L]
FallbackResource /index.html

I noticed you can also use any other defined route here (i.e. /contact)