Question

我正在构建一个以Wordpress作为后端运行的react SPA，但它并非无头，因此整个前端都包含在主题中。我只需要运行npm build并将生产文件排队在functions.php文件中。该应用程序将渲染到模板文件内的private void button1_Click(object sender, EventArgs e) { Film film = new Film(textBox1.Text); bs.Add(film); }中。我的wordpress安装设置为有一个静态主页，该主页使用包含React root div的模板。

除了路由器之外，这似乎工作得很好。如果我转到另一个地址，例如<div id="root"></div>，它将尝试加载名为https://mywebsite/about的wordpress页面，而不是停留在同一页面上，并使用路由器呈现适当的组件。 .htaccess文件中是否需要更改某些设置？还是我还缺少其他东西？

Answer 1

如果您的WP页面上有一个React应用，并且您不想编辑.htaccess，则还可以在functions.php中使用 add_rewrite_rule（）添加重写规则，以将所有请求重定向到您的由React Router处理的react app WP页面。

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>

Answer 2

是的，答案在.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。

在WordPress中反应路由

2 个答案: