reactjs - After page refresh react page not working

Question

I have create a bundle of react project by npm run build and create a virtual host file which is pointing to build folder, the application is working fine with different route, but when I page refresh other then root route then page not working.

This image is without page Load: https://i.stack.imgur.com/EnBOU.png

But after page load it giving me this error. https://i.stack.imgur.com/GooRM.png

Answer 1

Hi Please make base href on build index.html file inside head tag like this.

<base href="/reactapp/" /> // your root folder path

and add a .htaccess file in the root, paste below code inside the .htaccess.

<IfModule mod_rewrite.c>
    RewriteEngine on

    # Don't rewrite files or directories
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]

    # Rewrite everything else to index.html
    # to allow html5 state links
    RewriteRule ^ index.html [L]
</IfModule>

I hope it's useful for you.

Thanks