Question

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

我还要如何将两者（react和octoberCMS）结合在一起。我认为将React build保留在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页面。

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

Answer 1

如果您的React应用程序驻留在OctoberCMS中，则完全正常，所有路径均由OctoberCMS的路由器处理。您可以通过两种方式解决问题：

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

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

如何将ReactJS与OctoberCMS集成

1 个答案: