时间戳

首页 > 解决方案 > 在 wordpress 中反应路由

wordpress - 在 wordpress 中反应路由

问题描述

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

这似乎工作得很好，除了路由器。如果我去一个不同的地址，比如说https://mywebsite/about，它会尝试加载一个名为 的 wordpress 页面about，而不是停留在同一个页面上，并使用路由器来呈现适当的组件。我必须在 .htaccess 文件中更改某些设置吗？还是我还缺少其他东西？

标签： wordpressreactjs.htaccessreact-router

解决方案

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

推荐阅读