如何将 ReactJS 与 OctoberCMS 集成答案

【问题标题】：How To Integrate ReactJS with OctoberCMS如何将 ReactJS 与 OctoberCMS 集成
【发布时间】：2019-11-20 21:51:24
【问题描述】：

我正在尝试将 ReactJS 与 OctoberCMS 与驻留在 OctoberCMS 安装内名为 react 的目录中的 react 应用程序集成。我无法正确设置路由。直接点击 URL，例如 http://example.com/react/blog 会导致 404 页面。如果我在第一次访问主页后导航到相同的 url（使用我的导航栏），我可以成功打开该页面。请帮我正确设置路线。

另外，我应该如何将两者结合起来（react 和 octoberCMS）。我认为我将 react 构建保存在 OctoberCMS 安装中的文件夹中的方法是错误的。正确的做法应该是什么？

我在 package.json 中放置了 "homepage": "/react/"，它工作正常，但在新选项卡中打开页面会导致 OctoberCMS 呈现 404 页面

我也试过<BrowserRouter basename = {'react'}> 这样我最终得到了一个看起来像http://example.com/react/react/about-us/ 的网址

我尝试将构建内容直接放在 octoberCMS 安装的根目录中，结果在访问我的基本 url 时直接出现 404 页面。

<BrowserRouter>
  <TopBar />
  <Switch>
    <Route path={ `${process.env.PUBLIC_URL}/`} exact component={ HomePage} />
    <Route path={ `${process.env.PUBLIC_URL}/about-us`} exact component={ AboutUs} />
    <Route path={ `${process.env.PUBLIC_URL}/enquiry`} exact component={ Enquiry} />
    <Route path={ `${process.env.PUBLIC_URL}/contact`} exact component={ ContactUs} />
    <Route path={ `${process.env.PUBLIC_URL}/blog`} exact component={ Blog} />
    <Route path={ `${process.env.PUBLIC_URL}/terms`} exact component={ Terms} />
    <Route path={ `${process.env.PUBLIC_URL}/privacy-policy`} exact component={ PrivacyPolicy} />
    <Route path={ `${process.env.PUBLIC_URL}/request-purchase-offer`} exact component={ RequestPurchaseOffer} />
    <Route path={ `${process.env.PUBLIC_URL}/sell-now/benefits`} exact component={ Benefits} />
    <Route path={ `${process.env.PUBLIC_URL}/sell-now/how-dorrmat-works`} exact component={ HowDorrmatWorks} />
    <Route path={ `${process.env.PUBLIC_URL}/sell-now/customer-reviews`} exact component={ CustomerReviews} />
    <Route path={ `${process.env.PUBLIC_URL}/sell-now/offers`} exact component={ Offers} />
    <Route path={ `${process.env.PUBLIC_URL}/sell-now/faqs`} exact component={ FAQS} />
    <Route component={ NoMatchFound} />
  </Switch>
  <Footer />
  <button onClick={ ()=> this.scrollToTop(500)} className = "scroll-top"></button>
</BrowserRouter>

我希望 react 路由处理我的路由，而不是 octoberCMS 路由到 404 页面。此外，当我尝试在新选项卡中打开页面时，它不应重定向到 404 页面。

任何关于我应该如何将这两者结合在一起的建议都会有所帮助。

【问题讨论】：

标签： reactjs .htaccess react-router octobercms

【解决方案1】：

如果您的 React 应用程序位于 OctoberCMS 中，那么所有路径都由 OctoberCMS 的路由器处理是完全正常的。您可以通过两种方式解决您的问题：

您可以从由 OctoberCMS 处理的页面实例化您的应用，请记住，您必须定义一个路由来将所有请求重定向到应用的入口点。（您必须创建一个自定义的空插件并在其根目录中创建一个 routes.php 文件才能定义它）
或者，在 OctoberCMS .htaccess 文件中，您可以将入口点的路径列入白名单，以绕过 OctoberCMS

希望对您有所帮助，祝您编码愉快！

【讨论】：