如何实现React站点下WordPress子目录无斜杠URL的301重定向？

问题根源 #

根目录的.htaccess中存在全局移除尾斜杠的规则，且DirectorySlash Off关闭了Apache默认的目录自动加斜杠行为，导致/blog请求被React路由捕获，无法传递到WordPress子目录的.htaccess处理。

解决方案：修改根目录.htaccess #

在根目录的.htaccess中，在移除尾斜杠的规则之前添加针对/blog的例外重定向规则，同时调整全局移除尾斜杠规则，避免干扰WordPress路径。

修改后的根目录.htaccess内容：

# Disable directory indexes and MultiViews
Options -Indexes -MultiViews

# Prevent mod_dir appending a slash to directory requests
DirectorySlash Off

RewriteEngine On

# 1. 优先处理/blog（无尾斜杠）的301重定向到/blog/
RewriteRule ^blog$ /blog/ [R=301,L]

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

# 2. 修改全局移除尾斜杠规则，排除/blog/及其子路径
RewriteRule ^(?!blog/)(.*)/$ /$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]

修改逻辑说明 #

1. 优先重定向/blog：第一条规则直接匹配/blog（无尾斜杠），立即触发301跳转至/blog/，避免后续规则拦截请求。
2. 排除WordPress路径：全局移除尾斜杠规则通过^(?!blog/)否定前瞻语法，确保/blog/及其子路径不会被移除尾斜杠，保留WordPress所需的URL结构。
3. 兼容原有React路由：除/blog相关路径外，其他React路由的尾斜杠移除规则依然正常生效，不影响原项目逻辑。

验证步骤 #

1. 保存修改后的根目录.htaccess
2. 清除浏览器缓存（避免旧重定向缓存干扰测试）
3. 访问https://example.com/blog，应自动跳转到https://example.com/blog/并加载正常WordPress页面
4. 测试其他React路由（如https://example.com/about/），确认仍能正常跳转到无尾斜杠的URL

额外说明 #

WordPress子目录的.htaccess中已有子页面的尾斜杠重定向规则，现在根目录规则已放行/blog/路径，WordPress内部规则会自动处理其子页面（如/blog/post）的尾斜杠跳转需求。

内容的提问来源于stack exchange，提问作者malavpw