React Wordpress Apache Reloading Outside of Index -> Page Not Found

Question

I've searched and searched and asked ChatGPT with no joy.

BLUF: On my React headless CMS using bluehost apache wordpress as my backend, when I refresh a page that is not the root directory, i get a page not found error.

I've tried to modify my htaccess file to .html instead of .php 2 problems here:

Any requests to my custom endpoints are no longer working
If I save permalinks on wp-admin, the htaccess file reverts to .php

My site works just fine with the custom rest apis when the .htaccess file is .php, but reloading any page other than root directory causes the page not found error.

I'm using BrowserRouter on my react app, if that helps.

Thanks in advance.

I've modified my .htaccess file to .index instead of .php with no joy

htaccess contents:

# BEGIN WordPress
# The directives (lines) between "BEGIN WordPress" and "END WordPress" are
# dynamically generated, and should only be modified via WordPress filters.
# Any changes to the directives between these markers will be overwritten.
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access plus 1 hour"
    ExpiresByType image/jpeg "access plus 1 hour"
    ExpiresByType image/gif "access plus 1 hour"
    ExpiresByType image/png "access plus 1 hour"
    ExpiresByType text/css "access plus 1 hour"
    ExpiresByType application/pdf "access plus 6 hours"
    ExpiresByType text/javascript "access plus 1 hour"
    ExpiresByType text/html "access plus 0 seconds"
    ExpiresByType image/x-icon "access plus 1 year"
    ExpiresDefault "access plus 5 minutes"
</IfModule>
Options -Indexes
<IfModule mod_headers.c>
    Header set X-Endurance-Cache-Level "1"
    Header set X-nginx-cache "WordPress"
</IfModule>
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress
AddHandler application/x-httpd-ea-php82___lsphp .php

# BEGIN LiteSpeed
# The directives (lines) between "BEGIN LiteSpeed" and "END LiteSpeed" are
# dynamically generated, and should only be modified via WordPress filters.
# Any changes to the directives between these markers will be overwritten.
<IfModule Litespeed>
SetEnv noabort 1
</IfModule>
# END LiteSpeed

# php -- BEGIN cPanel-generated handler, do not edit
# Set the “ea-php81” package as the default “PHP” programming language.
<IfModule mime_module>
  AddHandler application/x-httpd-ea-php81___lsphp .php .php8 .phtml
</IfModule>
# php -- END cPanel-generated handler, do not edit


#My custom code


#End my custom code

an example route of what im trying to get to would be homepage.com/wp-json/myapp/v1/endpoint

Please include the contents of your existing `.htaccess` file. It sounds you perhaps need a conditional to route certain URLs to your "custom endpoints" (WP - `index.php`) and the rest to React (`index.html`). What are the URLs in question? — MrWhite, Jul 21 '23 at 13:24

MrWhite · Accepted Answer · 2023-07-21T15:05:18.910

an example route of what im trying to get to would be homepage.com/wp-json/myapp/v1/endpoint

Assuming every request that starts /wp-json/... should be routed through WordPress (index.php) and everything else sent to your React front-end (index.html) then you could add something like the following at the very top of the .htaccess file, before the # BEGIN WordPress comment marker (so as not to be overwritten later by WP itself).

# Allow requests for the homepage (root dir) to be handled by index.html (not WordPress)
# (Prioritise index.html over index.php)
DirectoryIndex index.html index.php

# Route all requests except for "/wp-json/..." to index.html
# (Also excludes requests for physical files and directories)
RewriteRule ^index\.(php|html)$ - [L]
RewriteCond %{REQUEST_URI} !^/wp-json/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.html [L]

# BEGIN WordPress
:

The CondPattern !^/wp-json/ ensures the rule is only processed when the REQUEST_URI server variable (root-relative URL-path) does not start with /wp-json/.

You don't need to repeat the RewriteEngine On directive, that already occurs later in the WordPress code block. It's actually the last instance of this directive that "wins" and controls the entire file.

Perfect thank you. I tried something similar before but i didnt put it outside the wordpress portion. — Bill Martin, Jul 21 '23 at 15:02
@BillMartin You're welcome. Just to add... you don't need to repeat the `RewriteEngine` directive, that already occurs later in the file. (I've updated my answer to add this.) — MrWhite, Jul 21 '23 at 15:06

React Wordpress Apache Reloading Outside of Index -> Page Not Found

1 Answers1