Redirect from React Page to WordPress Instance

Question

I have a React app on https://example.com/ and a WordPress blog inside as a sub directory: https://example.com/blog/

The issue: While browsing https://example.com/blog, I want it to get redirected (301) at https://example.com/blog/ But currently it is showing Error 404 because it is treating https://example.com/blog as a react page.

This is my root .htaccess:

# Disable directory indexes and MultiViews
Options -Indexes -MultiViews

# Prevent mod_dir appending a slash to directory requests
DirectorySlash Off

RewriteEngine On

# Prevent any further processing if the URL already ends with a file extension
RewriteRule \.\w{2,4}$ - [L]

# Redirect any requests to remove a trailing slash
RewriteRule (.*)/$ /$1 [R=301,L]

# Rewrite /foo to /foo.html if it exists
RewriteCond %{DOCUMENT_ROOT}/$1.html -f
RewriteRule (.*) $1.html [L]

# Otherwise, rewrite /foo to /foo/index.html if it exists
RewriteCond %{DOCUMENT_ROOT}/$1/index.html -f
RewriteRule (.*) $1/index.html [L]

and here is my WordPress .htaccess:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /blog/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /blog/index.php [L]

RewriteCond %{REQUEST_URI} /+[^\.]+$
    RewriteCond %{REQUEST_URI} !^/wp-json
RewriteRule ^(.+[^/])$ %{REQUEST_URI}/ [R=301,L]

</IfModule>

What could I do to redirect https://example.com/blog to https://example.com/blog/? It should be 301 redirection.

I have tried adding rules to .htaccess to both of the instances. But neither is working.

Answer 1

# Prevent mod_dir appending a slash to directory requests
DirectorySlash Off

The DirectorySlash Off directive in the root .htaccess file will prevent Apache (mod_dir) from appending the trailing slash to the /blog subdirectory with a 301 redirect. (Ordinarily, mod_dir "automatically" appends the trailing slash with a 301 redirect when it is omitted from a physical filesystem directory. DirectorySlash On is the default.)

However, you can't simply remove this directive as you are unconditionally removing the trailing slash from all requests later in that file. (I'm guessing this is a requirement of your React app?)

RewriteCond %{REQUEST_URI} /+[^\.]+$
    RewriteCond %{REQUEST_URI} !^/wp-json
RewriteRule ^(.+[^/])$ %{REQUEST_URI}/ [R=301,L]

You are appending trailing slashes to requests in the /blog/.htaccess file, although this is too late to cover the /blog directory itself. (The /blog/.htaccess file is not actually processed in this instance.) And this rule is possibly in the wrong place, although that does depend what the intention is (and is not directly related to this issue anyway).

Solution

In order to maintain the slash-less directories in your React app (if that is the intention?) then you will need to add a couple of additional directives to the root .htaccess file (immediately after the RewriteEngine directive) that explicitly appends the trailing slash to /blog.

For example:

# Allow mod_rewrite to match slash-less directory (Apache 2.4+)
RewriteOptions AllowNoSlash

# Redirect "/blog" to "/blog/"
RewriteRule ^blog$ /$0/ [R=301,L]

Where $0 is a backreference that contains the complete match of the RewriteRule pattern.

Once the redirect occurs, the /blog/.htaccess file is triggered and effectively overrides the root .htaccess file.

Aside: It's a little unclear from your question, but it looks like you have manually edited the code inside the WordPress code block (between the # BEGIN WordPress / # END WordPress comment markers) - this is not recommended. (Unless you have prevented WP from modifying the .htaccess file.)