React JS Apache

  • Friday, December 18, 2020
  • By Gunawan Probo Swandono
  • 0 Comments


When you use React JS in your project, and then it's time to put it in a server, sometimes you met a problem, especially when you use Apache. Here's how:

When you visit your url-domain/ip-address you not knowing the issue. But when you navigate to another page, let's say about page and your url is changed that when the problem may appear. Try to refresh page when not in a home url, like example.com/about. It'll appear 404 error.

Why? Because React JS serves only one HTML file (index.html), and React Router is in charge of serving the content based on what we request in URL. 

How we fix this issue? Just add some snippet in .htaccess on root folder of your React JS project. Or if there's no .htaccess you can add one. Here's the snippet:

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

Hope this can help. :)

You Might Also Like

0 comments

Note: Only a member of this blog may post a comment.