Apache web server doesn't allow me to refresh on /about but on localhost its working fine

Question

I bundled up one of my projects and it works fine. However when hitting refresh on a route /about, it displays The requested URL /about was not found on this server.. However when I do it on my localhost off a web server it works fine on refresh and forward/back buttons. I'm using react-router for my client side routing.

Heres the client side routing but I doubt its the problem

 Router.run(routes, Router.HistoryLocation, function (Handler) {     React.render(<Handler/>, app);  }); 

And my routes are just there:

let routes = ( <Route>   <Route name = "App" path="/" handler = {App}>     <Route name="About" path="/about" handler = {About}/>     <DefaultRoute name="Projects" handler = {Projects}/>   </Route> </Route>         ); 

Heres the APACHE that I think i broke:

<Directory /var/www/>                 # This directive allows us to have apache2's default start page                 # in /apache2-default/, but still have / go to the right place Require all granted                 #RedirectMatch ^/$ /apache2-default/         </Directory> 

kkotwal.me.conf:

<VirtualHost *:80>         # The ServerName directive sets the request scheme, hostname and port that         # the server uses to identify itself. This is used when creating         # redirection URLs. In the context of virtual hosts, the ServerName         # specifies what hostname must appear in the request's Host: header to         # match this virtual host. For the default virtual host (this file) this         # value is not decisive as it is used as a last resort host regardless.         # However, you must set it for any further virtual host explicitly.         #         ServerName kkotwal.me         ServerAlias www.kkotwal.me         ServerAdmin webmaster@localhost         DocumentRoot /var/www/kkotwal.me/public_html          # Available loglevels: trace8, ..., trace1, debug, info, notice, warn,         # error, crit, alert, emerg.         # It is also possible to configure the loglevel for particular         # modules, e.g.         #LogLevel info ssl:warn          ErrorLog ${APACHE_LOG_DIR}/error.log         CustomLog ${APACHE_LOG_DIR}/access.log combined </VirtualHost> 

Answer 1

Hey this is actually a pretty common thing.

What's happening is you need to get your apache server to ignore any nested paths and just send all requests /* to root instead. That way your front-end javascript can pick up the route on the client-side and display the correct view.

This is sometimes referred to as "HTML5 Mode" in different webservers.

In apache the way you do this is add a rule like the following:

  RewriteEngine On     RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]   RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d   RewriteRule ^ - [L]    RewriteRule ^ /index.html [L] 

What this does is to tell Apache to serve any files that exist, but if they dont exist, just serve /index.html rather than a 404 not found.