对于托管在 WordPress 页面中的 Create-React-App 的客户端路由，我需要哪些 .htaccess 规则？

Question

我有一个 React 应用程序，它有客户端路由。这是托管在 WordPress 页面和客户端中的，它可以正常工作。但是，如果您在我的应用程序中访问其中一个子 pages/routes 并点击重新加载，您会收到一些令人讨厌的 WordPress 错误，因为实际上该页面实际上并不存在于服务器上或 WordPress 中。

/MyApp <- 是一个实际的 WordPress 页面，其模板中包含我的 React 代码

客户端路由，只要您从上面的页面开始，所有这些都由我的应用程序提供

/MyApp/step-1

/MyApp/step-2

直接点击那些 url 会导致 404 或 WordPress 错误。听起来我需要重写 url 来重定向任何对子路由的请求以重定向到父路由，因此 /MyApp/step-1 将重写为 /MyApp?

Create-react-app 文档有一节介绍了如何执行此操作，但我不确定将其放在哪里，我认为 WordPress 现有的重写规则已经超出了它的能力。

https://create-react-app.dev/docs/deployment/#serving-apps-with-client-side-routing

这就是他们给出的内容（但没有说明如果其中有其他现有规则该怎么办）：

    Options -MultiViews
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]

我需要哪些 .htaccess 规则以及以什么顺序使它与 WordPress 很好地协同工作？

这是我现有的 .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
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

# Tried this here but it appears to not be doing as it should? I worry the above rule is over-powering it?
<IfModule mod_rewrite.c>
Options -MultiViews
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ /get-a-quote/ [QSA,L]
</IfModule>

我是一名 window 开发人员，所以 .htaccess 不是我的天然栖息地！

Answer 1

必须通过这个来获得动力，对于任何登陆此并需要它的人来说，这就是我想出的：

# This is our stuff to handle our nested React App, it has client-side routing so we need to
# catpure any "real" requests for the child pages and redirect them to the parent
<IfModule mod_rewrite.c>
  Options -MultiViews
  RewriteBase /
  RewriteEngine On
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  # MyApp here is the folder of my app, the url you would use to access it
  RewriteRule ^MyApp\/.+$ /MyApp/ [R,QSA,L]
</IfModule>

对于托管在 WordPress 页面中的 Create-React-App 的客户端路由，我需要哪些 .htaccess 规则？

Which .htaccess rules do I need for Client side routing with Create-React-App hosted within a WordPress page?

wordpress

.htaccess

create-react-app