Facebook Twitter Instagram
    TecAdmin
    • Home
    • FeedBack
    • Submit Article
    • About Us
    Facebook Twitter Instagram
    TecAdmin
    You are at:Home»Applications»(Resolved) – ReactJS 404 Error on Page Reload

    (Resolved) – ReactJS 404 Error on Page Reload

    By RahulJuly 15, 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.

    Advertisement

    Problem:

    The web server returns a 404 error message when we directly hit a sub URL of a production ReactJS application.

    (Resolved) – React.JS 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 web server running.

    • 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.

    • 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.

    • Amazon S3 (Static Website Hosting)

      If the application is hosted through Amazon s3 static website hosting. You need to configure index.html in the Error document.

      Go to the application S3 bucket -> Properties -> Static website hosting and set the Error document as showing in below image:

      React Handle 404 Error with CloudFront

    • Amazon CloudFront

      In the case of using Amazon Cloudfront with an s3 bucket, You also need to configure the Error pages in Cloudfront.

      Edit the Cloudfront -> Error pages. Now create a custom error response for 404 to index.html. You can also do the same for the 403 error code.

      React Handle 404 Error with S3 Bucket

    Conclusion

    This tutorial helped you to resolve the 404 error in the ReactJS production environment. Here we include the solution for fixing 404 errors in Nginx, Apache, Amazon S3 and CloudFront hosted applications.

    Error Code 404 React ReactJs
    Share. Facebook Twitter Pinterest LinkedIn Tumblr Email WhatsApp

    Related Posts

    How to Create React.js Application on macOS

    S3 & Cloudfront: 404 Error on Page Reload (Resolved)

    Best Linux Screen Recording Tools

    10 Best Linux Screen Recording Tools in 2022

    View 6 Comments

    6 Comments

    1. Marianne on November 4, 2022 9:32 am

      Thanks a lot for your answer !! Its worked !

      Reply
    2. Monir Hossain on November 2, 2022 1:55 pm

      I used the Express server. How can I solve this?

      Reply
    3. hasan on October 31, 2022 8:05 am

      its worked, thank you brother

      Reply
    4. YiLong Piao on October 3, 2022 5:02 am

      I am really appreciate for your guide.

      Thanks a lot

      Reply
    5. mehmet on June 29, 2022 8:37 pm

      I am thankful to you. ITS WORKED !!!!!

      Reply
    6. Douglas Maposa on June 3, 2022 1:58 pm

      It worked. Thanks mate.

      Reply

    Leave A Reply Cancel Reply

    Advertisement
    Recent Posts
    • How to Install PHP 8.2-7.4 on RHEL & CentOS Stream 9
    • How to Install MySQL 8.0 on RHEL & CentOS Stream 9
    • How to Split Large Archives in Linux using the Command Line
    • System.out.println() Method in Java: A Beginner’s Guide
    • Split Command in Linux With Examples (Split Large Files)
    Facebook Twitter Instagram Pinterest
    © 2023 Tecadmin.net. All Rights Reserved | Terms  | Privacy Policy

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