在 wordpress 中反应路由

Question

我正在构建一个以 Wordpress 作为后端运行的 react SPA，但它不是无头的，因此整个前端都包含在主题中。我只是运行 npm build 并将生产文件排入functions.php文件中。应用程序被渲染到<div id="root"></div>一个模板文件中。我的 wordpress 安装设置为有一个静态主页，它使用包含 React 根 div 的模板。

除了路由器之外，这似乎工作得很好。如果我转到不同的地址，例如https://mywebsite/about，它会尝试加载名为 的 wordpress 页面about，而不是停留在同一页面上，并使用路由器呈现适当的组件。我必须在 .htaccess 文件中更改某些设置吗？或者还有什么我想念的吗？

Answer 1

如果您的 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>