Report this

What is the reason for this report?

I can't reach sub urls on my react app

Posted on December 18, 2024

I deployed my React application as static service. The app works fine for the root path (/), but when I try to access any subpage URL directly (e.g., /move-address-detail, /building-detail), I receive a 404 Not Found error.

I am using React Router for client-side routing, and I have added an .htaccess file in my project’s root directory with the following content:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^.*$ /index.html [L]
</IfModule>

How can I resolve the 404 error and make app correctly serve the React app’s subpages?

Thanks in advance



This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Heya,

Can I ask why are you not using Routers?Tthese paths are meant to be handled by React Router client-side and not as actual files on the server.

Heya, @tumerseyrek

On top of what’s mentioned you can ensure that the .htaccess file is s placed in the correct location whch will be the root of your deployment directory.

Additionally, ensure that the server’s configuration allows .htaccess overrides. Open your Apache configuration file and check that the <Directory> directive contains AllowOverride All

Regards

The developer cloud

Scale up as you grow — whether you're running one virtual machine or ten thousand.

Get started for free

Sign up and get $200 in credit for your first 60 days with DigitalOcean.*

*This promotional offer applies to new accounts only.