如何将 React 应用程序集成到 Wordpress（反应路由器）中？答案

【问题标题】：How to integrate React app into Wordpress (react router)?如何将 React 应用程序集成到 Wordpress（反应路由器）中？
【发布时间】：2019-11-25 10:45:07
【问题描述】：

我创建了一个反应应用程序嵌入到 wordpress 网站。 React 应用程序由 create-react-app 创建，捆绑后，我已将其上传到 wordpress 网站。然后创建一个页面来加载捆绑的 js 文件。（按照本指南https://medium.com/@CodeCareerCoach/react-app-inside-a-wordpress-page-or-post-4c7d38181b3d）

因此它显示了 react 应用程序并适用于基本路线。

当我导航时，它仍然有效，当我刷新时我得到 404 ERR。

这是react app的路由。

  return <BrowserRouter basename='/testweb'>
    <Layout menuItems={menuItems} pages={pages}>
      <Switch>
          <Route exact path="/" render={() => <div>okay</div>} />
          <Route exact path="/home" render={(props) => {
              return <div>asdf</div>
            }} 
          />
...
          <Route render={(props)=> props.location.pathname } />
      </Switch>
    </Layout>
  </BrowserRouter>

在 package.json 中，我将 homepage 设置为 /testweb 如何让嵌套路由工作？

【问题讨论】：

你应该记住你有air-doc前缀，没有它，它应该可以工作。试试path="/air-doc/home"
@blits，我已经编辑了问题，我将basename设置为/air-doc，所以我认为这没有问题。
只在根目录上？
@milosh-n，是的。仅适用于根。
尝试从 '/home' 路径中删除 exact 吗？

标签： reactjs wordpress react-router react-router-dom

【解决方案1】：

我找到了自己的答案。如果有的话，请分享一个更好的。

假设我们的应用名为 testweb。

首先，将 package.json 中的主页属性更改为另一个，
测试网络反应。
保持路由原样（使用 testweb 作为基本 url）。
已将构建文件上传到 wordpress 站点的根目录。
已创建 /testweb/.htaccess 文件以在内部重定向到测试网络反应

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ – [L]
RewriteRule ^ /testweb-react/ [L]
</IfModule>

希望这对其他人也有帮助！

【讨论】：