Question

I can't reach sub urls on my react app

Posted on December 18, 2024
Deployment React
Asked by tumerseyrek

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

Submit an answer

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.

KFSys

Site Moderator

• December 19, 2024

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.

alexdo

Site Moderator

• December 19, 2024

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