How to set up apache2 for react - apache

Question

I have react app running on apache2.
In my app, there are 3 pages: home, about, register
I have 3 route like this:
<Route path="/home" component={....} />
<Route path="/about" component={.....} />
<Route path="/register" component={....} />
So, app works perfectly, when I go to www.onlyexampleurl.com, app is loaded correctly. I can list in home, about, register fine.
But, problem is, when I go directly to www.onlyexampleurl.com/about i am getting 404 from apache, because app is download from root path '/'.
How can I fix it? When I put www.onlyexampleurl.com/about to browser I want load about page from my app, but I am gettint 404 from apache.
Thank you for any help!

Answer 1

You need to redirect all requests to your entry file (assume it's index.html). Put in .htaccess:
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
This is standard solution for Single Page Apps.

Answer 2

This is a late response to the question, but I though I'd share what worked.for me, in case anyone bumps into the same problem.
This is assuming Ubuntu OS, I have not been successful for Linux:
I've followed certain steps from this post from Reddit and I can attest this works for making SPAs run in Apache web server with proper routing.
To quote:
1) In the apache2.conf located in etc/apache2/ I turned AllowOverride to All. I also added Servername localhost in the file. (I somehow skipped this last sentence, but still it worked fine in the end)
<Directory /var/www/>
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>
2) In the hosts.debian.tmpl file found in /etc/cloud/templates I added 127.0.0.1 <yourdomain.com> to the file where the other ips of the similiarity are.
127.0.0.1 yourdomain.com
3) I ran sudo a2enmod rewrite. Then I restarted the apache server via service apache2 restart. This turns on mod_rewrite.
Lastly inside of my project folder /var/www/html , along side my index.html file I created a .htaccess file and added in the following:
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^.*$ / [L,QSA]
End quote
Assuming you've run npm run build and then copied all the contents inside the build folder to your public directory, this should work.
When I first started web dev, I wasn't really sure I made the VirtualHost config right, so what I usually did was first to make a dummy index.html with, say, Hello World example. When I've confirmed that I'm able to see Hello World in the browser (which means I got the VirtualHost config right), I dump the contents of the build folder to where the dummy index.html was.
Hope this helps you now as much as it did for me!