Facebook Twitter Instagram
    TecAdmin
    • Home
    • Ubuntu 20.04
      • Upgrade Ubuntu
      • Install Java
      • Install Node.js
      • Install Docker
      • Install LAMP Stack
    • Tutorials
      • AWS
      • Shell Scripting
      • Docker
      • Git
      • MongoDB
    • FeedBack
    • Submit Article
    • About Us
    Facebook Twitter Instagram
    TecAdmin
    Home»General Articles»(Resolved) – ReactJS 404 Error on Page Reload

    (Resolved) – ReactJS 404 Error on Page Reload

    RahulBy RahulApril 19, 20222 Mins Read

    Once you make a production build of your ReactJS application. It creates an index.html file, which serves the entire application. All the requests must be hist to index.html first then the React Router serves the content based on the query in the URL. When we access the application with the main URL, it hits index.html and works fine. In case, you directly access one sub URL in the browser, the webserver doesn’t find any file with that name. In that case, a 404 error message is returned to the user.

    Problem:

    A 404 error message is returned by the webserver when we directly hit a sub URL of a production ReactJS application.

    ReactJS 404 Error on Page Reload

    Solution:

    A simple solution is to route all requests to the index.html file. Rest the React router will handle this.

    Update your server configuration based on the webserver running.

    1. Nginx Users

    The Nginx users can edit the server block (virtual host) configuration file and add the following snippet. This will route all the requests to the index.html file.

    #Add this in Nginx server block
    location / {
      ...
      try_files $uri.html $uri $uri/ /index.html;
      ...
    }
    

    Save the file and restart the Nginx service.

    2. Apache Users

    If the react application is hosted on an Apache webserver. Then you can add a .htaccess file at the root of your site and add the following snippet.

    <IfModule mod_rewrite.c>
      RewriteEngine On
      RewriteBase /
      RewriteRule ^index\.html$ - [L]
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteCond %{REQUEST_FILENAME} !-d
      RewriteCond %{REQUEST_FILENAME} !-l
      RewriteRule . /index.html [L]
    </IfModule>
    

    Make sure the Apache rewrite module is enabled on your system.

    Conclusion

    This tutorial helped to resolve the 404 error in the ReactJS production environment.

    Error Code 404 React ReactJs
    Share. Facebook Twitter Pinterest LinkedIn Tumblr Email WhatsApp
    Previous ArticleHow To Install Node.js on Ubuntu 22.04
    Next Article How To Enable SSH Server on Ubuntu 22.04

    Related Posts

    How to Find Django Install Location in Linux

    Updated:April 27, 20221 Min Read

    Adding a New SSH Key in GitHub

    Updated:April 1, 20223 Mins Read

    13 Best Linux Terminal Emulators and Bash Editors

    8 Mins Read

    How To Install Oracle VirtualBox on Debian 11

    2 Mins Read

    10 Best Linux FTP Clients in 2022

    5 Mins Read

    Bash Sequence Expression (Define Range)

    Updated:January 12, 20222 Mins Read

    Leave A Reply Cancel Reply

    Recent Posts
    • How to Enable / disable Firewall in Windows
    • How to Install JAVA on Ubuntu 22.04
    • Switching Display Manager in Ubuntu – GDM, LightDM & SDDM
    • Changing the Login Screen Background in Ubuntu 22.04 & 20.04
    • How To Install PHP (8.1, 7.4 or 5.6) on Ubuntu 22.04
    Facebook Twitter Instagram Pinterest
    © 2022 Tecadmin.net. All Rights Reserved | Terms  | Privacy Policy

    Type above and press Enter to search. Press Esc to cancel.