重写 WordPress 和 React Router 前端的 .htaccess

Question

对于我当前的项目，我使用 React 前端和 WordPress 应用程序作为后端。这主要是功能性的，除了一个问题：

直接（不是从首页）访问站点的特定路径或刷新时，找不到URL。

这意味着如果我访问 mysite.org 一切都会正常。我可以通过网站上的导航访问其他路线。但如果我输入 mysite.org/contact，就会出现 404 错误。如果我刷新主页以外的任何内容，也会发生同样的情况。

我怀疑这是因为我的 .htaccess 的配置方式。我看过其他关于 React router 和 .htaccess 的帖子，这些帖子是通过重写规则修复的，但这些解决方案对我不起作用，因为我仍然需要 WordPress 重写规则。我是 Apache 的新手，正在编辑 .htaccess，所以如果这很简单，请原谅我。

据我了解，我只需要所有 WordPress 调用都转到 index.php，而其他所有内容都转到 React index.html。

这是我当前 .htaccess 设置的相关片段：

# 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_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]

#Ideally, what is below would route any non-WordPress routes to the React app. 
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]

</IfModule>

DirectoryIndex index.html index.php

服务器根目录是这样的：

/（根目录）

--wp/（wordpress 文件夹。mysite.org/wp/wp-admin 访问管理站点。）

--.htaccess

--index.html（构建的 React 应用程序）

--index.php

这是我的 React Router：

<Routes>
  <Route path='/' element={<Home banners={banners} blurbs={blurbs}/>}></Route>
  <Route path='' element={<Home banners={banners} blurbs={blurbs}/>}></Route>
  <Route path='/about/leadership' element={<AboutLeadPage stafflist={staff}/>}></Route>
  <Route path='/about/youth' element={<AboutYouthPage youthposts={youthPosts}/>}></Route>
  <Route path='/about/beliefs' element={<AboutBeliefsPage beliefs={beliefs}/>}></Route>
  <Route path='/about/who-we-are' element={<WhoWeArePage/>}></Route>
  <Route path='/about/what-to-expect' element={<WhatToExpectPage/>}></Route>
  <Route path='/missions' element={<Missions missionslist={missions}/>}></Route>
  <Route path='/contact' element={<Contact/>}></Route>
</Routes>

如果您有任何其他问题/需要更多信息，请告诉我。

谢谢！！

Answer 1

你解决这个问题了吗？我现在也遇到同样的问题...