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>

score 70 · Accepted Answer · answered Aug 21 '15 at 23:51

70

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.

answered Aug 21 '15 at 23:51

Mike Driver

8,481
3
36
37

2

Where do I write this rule? Do i have to also type in any commands in the terminal to activate rewrites? – Karan Aug 22 '15 at 00:10
1

Never mind got it working by adding it to the webconfig file, under that virtual host, thank you. – Karan Aug 22 '15 at 00:55
Under the httpd.config I believe it was it has just add what Mike said here underneath to switch to HTML5 mode. – Karan Oct 05 '15 at 19:31
3

This can also be added to a `.htaccess` file in the same folder as the `index.html` file, though you may want to wrap it in a `` tag – aviemet Mar 05 '16 at 21:48
I have a similar issue, however this solution didn't help.. any ideas? http://stackoverflow.com/questions/38907839/react-router-fails-to-reload-apache-setup – Stewie Griffin Aug 12 '16 at 02:34
2

I tried above solution, but not working. I have added above code in htaccess file. – Abhishek Oct 02 '17 at 12:51
If even with the `.htaccess`, it still doesn't work maybe this file is not read. That was my problem caused **Allowoverride None** in _/etc/apache2/apache2.conf_, replace None by **All**, like that : `Allowoverride All`. – vomnes May 04 '20 at 14:15
Works perfectly for me.. I have added in ```.htaccess``` file – Hidayt Rahman Jun 12 '21 at 10:52
It works fine. Thank you. I just added these under the configuration of virtual host. – Chanuka Sandeepa Sep 01 '21 at 12:48

Abhijeet Verma · Answer 2 · 2018-02-21T10:50:18.020

In case of laravel, you need to render the same view where all the routes are written for react file. Laravel route is written as:

Route::get('{url}', function () { return view('welcome'); })->where(['url' => '.*']);

welcome blade file is:

<!doctype html> 
<html lang="{{ app()->getLocale() }}">
    <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Laravel</title>
         <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
    </head>
    <body>
         <div id="root"></div>
         <script src="{{asset('js/app.js')}}" ></script>
    </body> 
</html>

app.js file for route

 <Route>
     <Route name = "App" path="/" handler = {App}>
     <Route name="About" path="/about" handler = {About}/>
     <DefaultRoute name="Projects" handler = {Projects}/>
   </Route>

so every time you refresh on your about route, it will show the welcome blade and its respective routes in app.js file

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

2 Answers2

app.js file for route

Linked