我正在构建一个以 Wordpress 作为后端运行的 react SPA，但它不是无头的，因此整个前端都包含在主题中。我只是运行 npm build 并将生产文件排入functions.php文件中。应用程序被渲染到<div id="root"></div>一个模板文件中。我的 wordpress 安装设置为有一个静态主页，它使用包含 React 根 div 的模板。
除了路由器之外，这似乎工作得很好。如果我转到不同的地址，例如https://mywebsite/about，它会尝试加载名为 的 wordpress 页面about，而不是停留在同一页面上，并使用路由器呈现适当的组件。我必须在 .htaccess 文件中更改某些设置吗？或者还有什么我想念的吗？
如果您的 WP 页面上有一个 React 应用程序并且您不想编辑 .htaccess，您还可以在 functions.php 中使用add_rewrite_rule()添加重写规则，以将所有请求重定向到您的 React 应用程序 WP 页面以由 React Router 处理.
add_action('init', 'wp55290310_rewrite_rules');
function wp55290310_rewrite_rules() {
add_rewrite_rule('^your-react-app-root/(.+)?', 'index.php?pagename=your-react-page-name', 'top');
}
你需要在 React Router 中指定 baseName：
<BrowserRouter basename="/your-react-app-root">
<Switch>
<Route exact path="/" component={SomeComponent} />
<Route exact path="/other-page" component={OtherComponent} />
</Switch>
</BrowserRouter>
是的，答案就在 .htaccess 文件中。
您需要设置一个包罗万象的规则，它将为所有路由提供index.php文件，而不是尝试为现在正在发生的路由查找匹配的 php 文件。
您应该能够使用此配置来实现此类行为：
# BEGIN WordPress
<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
解决方案确实意味着您正在服务器上使用 modrewrite。